【脚手架VueCLI】从零开始，创建一个VUE项目

脚手架VueCli 一、什么是CLI

CLI：Command-Line Interface（命令行界面），俗称脚手架。 VueCLI可以帮助我们快速开发Vue开发环境以及对应的webpack配置。

二、VueCLI所需要的环境

运行VueCLI需要电脑中已经安装好了NodeJS和NPM命令。

NPM：Node Package Manager（NodeJS包管理工具）

在搭建脚手架之前，我们需要先把webpack的基础结构给安装好。

命令：npm install webpack -g

三、安装Vue脚手架

命令：npm install @vue/cli -g

如果出现文件无法被替换删除的情况，先使用命令：npm cache clean --force； 然后再使用指令：npm install @vue/cli -g --force

上述命令安装的应该是CLI的4的版本，4的版本基本上与3的功能一致。 如果我们需要使用旧版的vue init功能，可以安装一个全局的桥接工具。

命令：npm install @vue/cli-init -g

CLI 2创建webpack项目：

vue init webpack myPorject（myPorject这个是项目名）

CLI3创建webpack项目：

vue create myProject

四、使用CLI2创建项目

使用命令后，在真正创建项目之前，有些选项需要我们进行一些设置，具体如下：

• Project name (my-project):（项目名不能使用大写）这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车
• Project description (A Vue.js project):项目描述，也可直接点击回车，使用默认名字
• Author (xxx)：作者，输入你的大名
• vue build (Use arrow keys)：选择默认的就成Runtime + Compiler: recommended for most users
• install vue-router：是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y” 或者直接回车即可。
• Use ESLint to lint your code?是否使用ESLint？(ESlint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。) 默认使用，这样会生成相关的ESLint配置。
• Pick an ESLint preset Standard：接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
• Setup unit tests?（是否安装单元测试）
• Setup e2e tests with Nightwatch：（是否安装E2E测试框架NightWatch（E2E，也就是End To End，就是所谓的“用户真实场景）
• Should we run 'npm install' for you after the project has been created?（项目创建完成之后使用npm命令来进行包管理）是否使用安装依赖的包。
• 全部选择好回车生成项目了

五、项目目录结构描述

build  		//构建脚步目录，保存一些webpack的初始化配置
config  	//构建配置目录，项目初始化的配置，包括端口号等
node_modules  	//npm加载的项目依赖的模块
src 	 //源码目录，这里是我们要开发的目录，基本上要做的事情都在这个目录里
- assets	  //资源目录，用来放置图片，如logo等 
- components  	//组件目录，用来放组件文件
- router 	 // 路由配置
- app.vue 	 //是项目入口文件
- main.js 	  //是项目的核心文件
static  	 //文件夹用来放置静态资源目录，如图片、字体等。
test  	 //初始测试目录，可删除
.babelrc babel  	 //编译参数，vue开发需要babel编译 
.gitignore 	   //用来过滤一些版本控制的文件，比如node_modules文件夹 
index.html 	  //是首页入口文件，你可以添加一些 meta 信息或统计代码啥。 
package.json  	 //是项目配置文件，记载着一些命令和依赖还有简要的项目描述信息 
README.md   	 //项目的说明文档，markdown 格式，介绍自己这个项目的

六、了解runtime-only和runtime-complier的区别

我们使用脚手架初始化两个项目，编译方式分别使用runtime-only（左边）和runtime-complier(右边)。可以发现，他们的main.js的代码有一些区别。

其主要的区别在于在加载组件的使用运用了两种不同的方法。一种是直接注册组件，而另外一种使用render方法进行加载。要了解这两个方式的差异，我们首先要了解两种方式渲染网页的方法。

runtime-compiler：vue的运行过程会将 template --解析–>成抽象语法树（ast）–编译成–> render函数—>虚拟dom树---->渲染成真实dom。 runtime-only：render函数—>虚拟dom—>真实dom。runtime-only跳过了template解析成抽象语法树的步骤，代码量更少，性能更高。

在runtime-compiler中删除components属性和template，增加render函数也可以实现runtime-only一样的效果。

七、了解CLI3

CLI3和CLI2的差别还是很巨大的。在CLI3中移除了目录中的Config、Build和static目录，新增了public目录。并且把index.html移动到了public目录之中。并在CLI3增加了一个图形界面，我们可以通过图形界面来控制整个项目。

启动命令：vue ui

了解CLI3中目录结构以及文件的含义后，体验脚手架的图形管理页面即可。