vue-cli2和vue-cli3脚手架介绍和深入理解

一、vuecli的介绍和安装

1、介绍

CLI是Command-Line Interface（命令行界面）俗称脚手架

Vue CLI使用的前提 Node.js、webpack（npm install webpack -g全局安装）

2、安装vue脚手架（cli3）

npm install -g @vue/cli   

-g就是全局安装（global）

注意：此时安装的是最新版本，如果需要想按照vue cli2的方式初始化项目时是不可以的，需要拉去2.x模板，使用旧版本的vue-init功能，需要全局安装一个桥接工具

npm install -g @vue/cli-init
#'vue init'的运行效果将跟'vue-cli@2.x'相同

3、初始化项目（init初始化）

①vue cli2中

vue init webpack 项目名称

②vue cli3中

vue create 项目名称

二、vue cli2的目录结构解析

1、首先看package.json文件

谷歌的v8引擎：本来是js->字节码->浏览器，现在js->二进制代码

node可以直接执行js代码，是执行js的底层支撑。所以在终端中可以直接用node xxx.js 来执行js文件。

①其中"build": "node build/build.js"也就是说在npm run build时在执行build.js文件

在build.js中有引导一些配置文件的合并等等东西

②其中"dev": “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”

配置开发服务器工具–inline：页面实时刷新，–progress打印监听进程，–config指定需要找的配置文件

2、config文件夹中是定义一些需要