02 Vue-Cli(3.x)-基础知识点

Vue-Cli 3.x版本

一、Vue-Cli的概述

Vue-Cli(Command-Line Interface),Vue.Js框架脚手架，在开发大型应用时需要考虑到代码目录结构，项目结构和部署、热加载、代码单元测试等，这类繁杂庞大的事情就由Vue-Cli来处理，快速搭建Vue开发环境以及对应的webpack的配置。

二、Vue-Cli的安装

2.1 Vue-Cli全局安装

npm install @vue/cli -g

三、Vue-Cli创建项目

3.1 vue-cli2.x版本创建项目

1. 全局安装桥接工具

npm install @vue/cli-init -g

2. 创建项目文件夹

vue init webpack myproject #不能包含大写字母

3. 创建项目的选择项

? Project name MyProject # 项目名称
? Project description A Vue.js project # 项目描述
? Author SuYakamoz <142188@qq.com> # 作者信息
? Vue build standalone # runtime模式
? Install vue-router? No #vue路由
? Use ESLint to lint your code? No #ES代码限制检测
? Set up unit tests No # 单元测试
? Setup e2e tests with Nightwatch? No # 端到端测试
? Should we run `npm install` for you after the project has been created? (recommended) npm #包管理工具  

4. 创建完成项目的基本目录结构

3.2 vue-cli3.x版本创建项目

vue-cli3.x版本优化内容

• vue-cli 3基于webapck 4基础设计
• vue-cli 3实现零配置功能，移除配置文件目录的 bulid与config等目录
• vue-cli 3提供vue UI命令，让配置过程成为可视化
• 移除static目录，新增public目录，将index.html移至public目录中

1. 使用vue-cli3的命令创建项目

vue create vuecli3project

2. 选择vue-cli3的配置属性

# 选择配置方式，默认或者使用空格键手动勾选所需配置
? Check the features needed for your project: Babel 
# 对于以下列举的特殊文件是否需要单独生产文件或者保存在package.json
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
# 是否将以上已经选择好的配置进行保存
? Save this as a preset for future projects? Yes
# 将保存的配置设置名称
? Save preset as: soulmate
# 选择安装依赖项时要使用的程序包管理器
? Pick the package manager to use when installing dependencies: NPM

3. 运行项目

npm run serve

4. 创建完成的项目基本目录结构
   

四、浅析Vue的底层原理

4.1 Vue的运行过程

（该图片引自 小码哥教育 coderwhy 王红元老师 制作图）

模板 -解析-> 抽象语法树 -编译-> render( ) -渲染-> 虚拟DOM -更新-> 真实DOM

4.2 npm run build的运行过程

（该图片引自 小码哥教育 coderwhy 王红元老师 制作图）

4.3 npm run dev的运行过程

（该图片引自 小码哥教育 coderwhy 王红元老师 制作图）

五、Runtime+Compiler与Runtime Only的区别

该部分内容引自:
作者：海豚先生
来源：简书

5.1 Runtime+Compiler(运行时编译 + 编译器)

1. 指定template
2. 如果没有对代码做预编译，但又使用了 Vue 的 template 属性并传入一个字符串，需要在客户端编译模板
3. 打包时不进行编译，在运行的时候，才去编译 template
4. 体积较大

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

5.2 Runtime Only(运行时编译)

1. 指定render函数
2. 通常借助webpack的loader工具，将 .vue 文件编译为JavaScript，进行了预编译。所以该版本只包含运行时的 Vue.js 代码
3. webpack打包时已经将template编译为render函数，不需要在客户端进行编译
4. template 会通过 vue-template-compiler 转换为 render 函数