Vue Cli2安装及配置

Vue Cli2详解

1.使用脚手架二（即vue cli2）需要安装，在安装之前需要安装node以及webpack（用于打包） ：

1.1安装node：从node.js官网下载并安装node；官网地址：https://nodejs.org/en/，安装时一直点下一步就行了。安装完成后，打开命令行（win+R）,输入 node-v，出现相应版本号则安装成功。

1.2 环境变量配置：主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

（1）找到安装node的文件夹，在其中创建node_cache和node_global两个文件夹：

（2）然后若要把全局模块所在路径及缓存路径切换到上图位置，则需执行如下命令：npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"（路径为这两个文件夹的路径）

1.3环境变量：

系统变量：变量值：C:\Program Files\nodejs\node_global\node_modules

用户变量：变量值：C:\Program Files\nodejs\node_global

配置完成后，安装个module测试，执行：npm install express -g  （-g是全局安装）

1.4安装webpack，在命令行执行：npm install webpack webpack-cli –g；安装完之后输入webpack -v查看版本号。

2.然后是安装vue cli2，命令：npm install --global vue-cli；安装完之后输入vue -V查看版本号，出现版本号即成功。

3.安装成功之后，就可以创建项目。

vue cli2创建项目的命令是vue init webpack 项目名称。创建完成后运行,输入：npm run dev 执行项目

其中runtime only和runtime compiler的区别如下：

Runtime only：about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere（仅运行程序: 比上面那种模式轻大约 6KB min+gzip，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数）

Runtime Compiler：recommended for most users（运行程序+编译器:推荐给大多数用户）区别

（1）runtime-only 比 runtime-compiler 轻 6kb

（2）runtime-only 运行更快

（3）runtime-only 其实只能识别render函数，不能识别template，.vue文件中的也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template

（4）两种模式生成的代码只在main.js中不同：

可以发现一个 是用 template + component 而另一个 则是 用 render 函数

4.项目目录详解