vue webpack init_Vue学习笔记之VueCLI脚手架的介绍和安装CLI2的介绍

1、概念：CLI(Command-Line Interface)，命令行界面，俗称脚手架。通过配套的图形化界面创建、开发和管理你的项目。Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了。使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置。

2、环境安装(需要node、webpack的环境支撑)：cnpm install -g @vue/cli 进行全局安装即可

官网介绍：

通过cnpm install -g @vue/cli 命令安装完后，用vue --version 进行版本查看：

现在的版本已经是4.5.3了，如果仍然需要使用旧版本的vue init 的功能，则可以全局安装一个桥接工具：

通过命令：cnpm install @vue/cli-init -g

这样我们既可以用2的脚手架创建项目，也可以通过4的脚手架创建项目：

Vue CLI2初始化项目：vue init webpack my-project

安装过程的选项配置：

project name --项目名称，不能包含大写

project description --项目的信息

author --作者的信息，默认从git中读取信息

vue build --在项目编译的时候，选择什么方式来进行runtime + compiler 或 runtime-only(用上下键 来选择相应的方式)

install vue-router？ --是否安装路由

use ESLint to lint your code？ --是否用ESLint 检测代码规范，根据自己情况选择

set up unit tests --是否进行单元测试

setup e2e tests with Nightwatch？ --是否e2e端到端测试，安装Nightwatch进行自动化测试框架，如果有需要，可以选择selenium环境

should we run 'npm install' for you after the project has been Created？ --选择npm后yam命令安装

最后会根据配置，进行整个项目的安装配置：

成功安装后，生成一个新项目：

CLI2的目录结构解析：

package.json:

项目打包："build": "node build/build.js" (node命令直接可以运行js文件，直接让js文件在终端可以执行相应的代码，无需浏览器来进行解析)

这个目录下，配置一些基础的变量，变量名称可以根据自己的实际情况命名：

src开发目录

static静态页面，里面的文件会原封不动打包到dist文件夹中

babelrc适配：在ES6转换为ES5的代码读取的配置文件。浏览器市场份额大于等于>1%，且是最后两个版本，并排除IE小于8的版本浏览器：

代码规范配置：root = true 打开此设置

配置需要忽略上传的文件：

PS：如果安装比较慢，建议用淘宝镜像：npm install -g cnpm --registry=HTTPS://registry.npm.taobao.org ，这样后面安装的时就可以用cnpm install [name] 来安装想要的环境了。