Vue-Cli 3.x版本

文章目录

Vue-Cli 3.x版本一、Vue-Cli的概述二、Vue-Cli的安装2.1 Vue-Cli全局安装 三、Vue-Cli创建项目3.1 vue-cli2.x版本创建项目3.2 vue-cli3.x版本创建项目 四、浅析Vue的底层原理4.1 Vue的运行过程4.2 npm run build的运行过程4.3 npm run dev的运行过程 五、Runtime+Compiler与Runtime Only的区别5.1 Runtime+Compiler(运行时编译 + 编译器)5.2 Runtime Only(运行时编译)

一、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版本创建项目

全局安装桥接工具 npm install @vue/cli-init -g 创建项目文件夹 vue init webpack myproject #不能包含大写字母 创建项目的选择项 ? 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 #包管理工具 创建完成项目的基本目录结构

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目录中 使用vue-cli3的命令创建项目 vue create vuecli3project 选择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 运行项目 npm run serve 创建完成的项目基本目录结构

四、浅析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(运行时编译 + 编译器)

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

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

5.2 Runtime Only(运行时编译)

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