搭建vue脚手架(vue-cli)

一、搭建开发环境

1、安装node
从node官网下载并安装Node,安装完之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

2、安装淘宝镜像（选择性）
由于npm的服务器是国外的，有时候安装‘依赖’的时候会很慢，所以可以使用淘宝镜像及其命令cnpm,可以在命令行窗口输入：npm install -g cnpm --registry=https://registry.npm.taobao.org来安装，安装完成后输入cnpm -v,如下图，出现相应的版本号，说明安装成功。

3、安装webpack
在命令行窗口输入：npm install webpack -g,安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

安装完后如果提示 webpack 不是内部或外部命令...这样的错误，则需要进行环境变量的配置；

1. 找到webpack的安装路径( webpack 4.x以后可能还需要安装 webpack-cli: npm i webpack-cli -g)
2. 打开环境变量的设置窗口，将webpack的安装地址添加到path变量中
3. 关闭之前的cmd窗口，在重新打开的cmd窗口中执行webpack -v命令

4、安装vue-cli脚手架构建工具
在命令行窗口输入：npm install vue-cli -g，安装完成之后输入vue -V(大写的V)，如下图，如果出现相应的版本号，则说明安装成功。

注：上面四步只用安装一次，之后再创建vue项目时不用安装

二、创建vue项目

通过上面四步，我们将所需要的环境和工具都已经准备好了，接下来，开始使用vue-cli构建项目；
1、创建项目前
在电脑中找一个地方用来存放项目，然后进入到该文件夹中打开命令行窗口；这里有三种方式进入到项目文件夹：
a、在命令行窗口通过cd 目录路径进入相应文件夹；
b、通过图形化界面进入到文件夹后，在窗口上方的路径栏中输入cmd，然后回车，即可打开命令行窗口；
c、如果已安装git的，在相关目录右键选择Git Bash Here
2、创建项目并初始化目录结构
输入命令：vue init webpack my_vue_project，来创建项目并初始化目录结构，my_vue_project为项目名称，如下图所示：

3、安装依赖包
使用cd命令进入项目目录，cd exprice，输入命令：npm install安装依赖包；尽量不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)，但是如果真的安装“个把”小时也没成功那就用：cnpm install吧；
4、安装vue路由模块(vue-router) 和网络请求模块(vue-resource)
输入：cnpm install vue-router vue-resource --save
5、对各目录的说明