搭建Vue脚手架（vue-cli）

1、安装node.js
从node.js官网：https://nodejs.org/en/下载并安装node，安装过程很简单，一路“next”就可以了，默认是安装到C盘，也可以更改安装位置；

PS：如果Node.js默认安装路径改到了D盘，则需要配置环境变量；

打开计算机属性-高级系统设置-环境变量，在系统变量列表中找到path变量；

这个每个人电脑不同，具体界面可能不一样。
检测是否安装成功：
打开命令行工具(win+r，然后输入cmd)，输入 node -v

在官网下载安装node.js后，就已经自带npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上，以免对后续产生影响。
大家可以看到我的node是v8.11.3；npm是5.6.0

---

2、安装淘宝镜像

我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”

输入”npm install -g cnpm --registry=https://registry.npm.taobao.org“确定安装
安装完成之后输入 cnpm -v；如下图，有相应的版本号，则说明安装成功。

使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替换就可以了

---

3、安装webpack
输入”npm install webpack -g“，

安装时候如果出现以下：

这个接着输入 webpack-cli 或者 webpack-command 即可；
安装完成之后输入 webpack -v；如下图，有相应的版本号，则说明安装成功。

大家可以看到我的 webpack是v4.16.4

---

4、安装vue-cli脚手架构建工具

全局安装 vue-cli;输入”npm install vue-cli -g“，
安装完成之后输入 vue -V（注意这里是大写的“V”）；如下图，有相应的版本号，则说明安装成功。

---

通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目
1、新建一个myvue（项目名）文件夹来放置项目
输入：vue init webpack myvue(项目名)
PS：项目名不能大写，不能使用中文 ，这个文件夹会自动生成在你指定的目录中。

输入命令后，会跳出几个选项让你回答：

? Project name (myvue) ---------------------项目名称
? Project name myvue
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由，也就是以后是spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "myvue".
To get started: --------------------- 这里说明如何启动这个服务
cd myvue
npm install
npm run dev

---

回答完毕后就开始构建项目了
1、cd 命令进入创建的工程目录，首先cd myvue（这里是自己建工程的名字）；
2、安装项目依赖：npm install，因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)；
3、安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。

创建完成的“myvue”目录如下：

简单的说明下各个目录都是干嘛的：（借网上图）

4、启动项目，输入：npm run dev。

在浏览器中打开 http://localhost:8080

这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。

---

这里要说的几点常见问题：

1、I Your application is running here: http://localhost:8080:如果不能自动打开浏览器，

设置autoOpenBrowser: true, //是否默认打开浏览器,默认是false，改为true即可，如下图：

2、win7系统下在cmd中 输入npm run dev后，项目能正常跑起来，但是整个cmd窗口就不能再输入任何东西，
解决办法：ctrl+c

至此简单的一个项目构建完毕。