从零开始搭建vue开发环境及构建vue项目

1.安装node.js
安装完成之后，打开dos(windows+R或者直接windows键打开，输入cmd，按回车键)窗口，输入命令node -v可以查看安装的

node.js版本
node.js自带npm(包管理)安装完成之后，npm本地仓库默认在 C:\Users\Administrator\AppData\Roaming 目录下。注：有

的电脑会自己隐藏文件夹，可以复制上面的目录地址在自己电脑上直接进入。看到如下图的两个文件夹：npm和npm-cache
接下来就是将上面的npm和npm-cache移动到node.js的安装目录下
2.改变npm本地仓库地址
先找到自己的node.js安装目录，不记得安装目录的，可以在dos窗口输入where node查看
现在在node.js目录下手动新建两个名字为node_cache和node_global空文件夹，注意是空的文件夹
输入命令移动文件夹：cmd中执行npm config set prefix "D:\Program Files\nodejs\node_global"回车，然后继续执行命

令npm config set cache "D:\Program Files\nodejs\node_cache"。命令里面的目录写自己刚在nodejs安装目录下创建的

node_cache和node_global目录

3.配置淘宝镜像站
4.安装VUE
在cmd窗口输入全局安装vue命令npm install vue -g进行安装，正常第一次安装应该是执行命令后出现added 1 package,安

装完成之后可以在node.js/node_global/node_modules下面找到vue目录,dist（distribution）是最终发布的产品，最后vue项目打

包发布会生成一个这样的dist文件给我们来发布，这个后面写部署的时候补上说明。
安装vue-router，这个差不多是使用vue开发很常用的，所以一般使用全局安装。在cmd窗口输入命令npm install vue-

router -g进行安装,安装完成之后同样可以在node.js/node_global/node_modules下面找到vue-router目录。跟上面vue目录同级
安装脚手架：在cmd窗口输入命令npm install vue-cli -g并执行。
5.构建一个新的VUE项目
在cmd窗口到达项目目录后，继续执行命令vue init webpack vueDemo来新建项目(vueDemo为项目名称)
继续按Enter键，项目开始构建，
“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成

相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。

“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”

这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们

就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader
.初始化项目：在cmd窗口到达项目路径下这里的项目路径是上一步中的project Name下，就是要到你的项目下，去运行项目

，执行命令npm install
运行项目：继续在上图的窗口中执行命令cnpm run dev
运行完毕会出现项目的地址

部分内容参考

手把手教你用vue-cli搭建vue项目