Vuejs环境安装与工程建立【小白Windows向】

一、对于第一次使用Vue的Windows用户【搭建本地开发环境】

第一步，一路下一步安装Nodejs；

第二步，打开cmd或者WindowsPowershell或者Git命令行，用npm安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

这一步和上一步别问那么多，照做就是。

第三步，用cnpm或者npm按照vue官网的资料安装vue

cnpm install vue

第四步，用cnpm或者npm安装打包工具（就是Web开发工程的打包工具）——webpack

cnpm install webpack -g

第五步，在准备创建工程的同级目录下安装vue-cli（推荐cnpm）

cnpm install --global vue-cli

以上为环境搭建。

二、以后每次创建Vue工程都按下面的操作【工程建立】

第一步，用vue创建一个工程，在Windows会是一个文件夹的形式

vue init webpack 工程名

这里看下图，Powershell实际操作截图，有的细节以后补充。



第二步，cnpm或npm（在工程目录下）执行install，安装其他依赖

cnpm install

如下图最后两行。



漫长的刷屏和等待。



最终会部署65个包。



第三步，启动vue工程（cnpm或者npm run dev命令）



这里显示用了19.3秒，就会自动弹出浏览器页面（停止就关掉Powershell或者ControlC就行了，下次加载可以用IIS加载工程目录）：



这个时候就可以用VSCode编辑整个工程了：



关于VSCode，可能需要安装一些支持Vue的插件（点我），希望微软爸爸以后能原生支持Vue吧。



这三个箭头的东西是我下篇iView会用到的。关于Vue的工程目录，就得学一下Vue了，慕课有视频，可以去看看（老师用的是MacOS）