![v2-cb9c9f397d0dcd11e31c1574ba046eea_1440w.jpg?source=172ae18b](http://img-03.proxy.5ce.com/view/image?&type=2&guid=37c414e1-432e-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-cb9c9f397d0dcd11e31c1574ba046eea_1440w.jpg?source=172ae18b)
1.vue-cli 是Vue的脚手架工具,windows 下要安装 vue-cli,必须先安装 node.js,才能使用npm。
在cmd里输入node -v,若能出现版本号,则表示已经安装,若不能,需要到官网下载安装 (https://nodejs.org/en/)
![v2-d0aaf9c4817668ffde7d9a13c7f596cd_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=37c414e1-432e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-d0aaf9c4817668ffde7d9a13c7f596cd_b.jpg)
2.在安装好的目录下,新建两个文件夹 ”node_cache” 和 ”node_global”
![v2-085112e77403257f7f6b6639f8f92236_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=37c414e1-432e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-085112e77403257f7f6b6639f8f92236_b.jpg)
3.修改 npm 全局模块和缓存的路径,才cmd里面输入
npm
4.通过淘宝镜像配置cnpm,在cmd里面输入
npm
为了避免每次安装都需要加上--registry参数,可以使用如下命令,永久更改系统里面的指定下载站点
npm
5.设置环境变量,在系统变量path里面添加刚刚的全局模块存放路径
![v2-250026bebb4f38be3f4abb11099f30ae_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=37c414e1-432e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-250026bebb4f38be3f4abb11099f30ae_b.jpg)
6.全局安装 vue-cli
cnpm
7.创建一个基于 webpack 模板的新项目,在cmd里面,切换到你要存放项目的路径,输入
vue init webpack ProjectName
创建项目常用的选项
- Install vue-router?
这个是官方的路由,大多数情况下都使用
- Use ESLint to lint your code?
ESLint是用来统一代码风格的,一般项目都会使用。
![v2-1bea748b78aca28e432c44512dcf7881_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=37c414e1-432e-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-1bea748b78aca28e432c44512dcf7881_b.jpg)
等待依赖包安装完成之后,切换到项目路径下,输入 npm run dev 启动项目,即可看到在本地成功启动。
![v2-637401fbf8e97b1d46442cc9076d2d06_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=37c414e1-432e-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-637401fbf8e97b1d46442cc9076d2d06_b.jpg)