文章目录
- 前言
- 一、Runtime-Compiler和Runtime-only两个模式
- 1. 模式来源
- 2. 案例显示
- 3. 区别
- 4. 引发思考
- 二、Vue程序运行过程和原因
- 三、render 函数使用
- 1. 使用方式一
- 2. 使用方式二
- 四、eslint 关闭
- 五、脚手架2和3版本的配置文件
- 1. 脚手架2版本
- 1. 脚手架3版本
- 六、vue项目管理器
- 七、脚手架3版本创建项目的配置文件配置
- 1. vue项目管理器配置
- 2. 脚手架2版本配置
- 3. `vue.config,js`
前言
一、Runtime-Compiler和Runtime-only两个模式
1. 模式来源
创建项目时需要选择一个模式，就是这两个模式之一 runtimecompiler 和 runtimeonly ，如下所示
2. 案例显示
使用脚手架2版本 vue init webpack project-name新建两个项目，如图
01 选择的是 Runtime+Compiler 02 选择的事 Runtime-only
3. 区别
模式不同主要体现在两个项目中的 main.js 中的不同，如下：
01_runtimecompiler项目
02_runtimeonly项目
4. 引发思考
引发思考：为什么存在这样的差异呢？
- 我们需要先理解Vue应用程序是如何运行起来的。
- Vue中的模板如何最终渲染成真实DOM。
- 我们来看下面的一幅图：
vue 程序运行过程。
二、Vue程序运行过程和原因
运行过程解析
- template的模板存放到 vue 的 option 中，
- 然后 parse（解析） 成 ast(abstract syntax tree 抽象语法树)
- 在编译，然后使用 render() 方法
- 通过render() 生成 虚拟dom ,在展现成 UI。
- 总结下：template -> ast -> render -> vdom -> UI
综上所述，区别如下：
通过 上面了解到， 两个模式的区别如下：
runtime-compiler(v1)
template -> ast -> render -> vdom -> UI
runtime-only(v2)(1.性能更高 2.下面的代码量更少)
render -> vdom -> UI
可以看到 runtime-only 比 Runtime+Compiler 1. 性能更高 2.下面的代码量更少
当然： runtime-compiler 模式中，也可以使用 render() 函数，看本项目的 main.js 即可。
注意runtime-compiler模式下，也可以使用 render 函数进行开发推荐使用 第一个。但是在以后项目开发时，推荐使用第二个，因为 1.性能更高 2.下面的代码量更少
三、render 函数使用
1. 使用方式一
2. 使用方式二
这里的 cpn 组件，也就是后来的 APP 组件。
四、eslint 关闭
01_runtimecompiler\config\index.js 中 useEslint 属性，true 开启， false 关闭
五、脚手架2和3版本的配置文件
1. 脚手架2版本
- 先看下脚手架2版本创建的项目目录
- 有两个文件夹，build 和 config 。里面都是配置文件
- 先看package.json 里面的 script 脚本，如下：
- 可以看到对应的配置文件，里面又会引入其他配置文件。
1. 脚手架3版本
- 先看下脚手架3版本创建的项目目录，03是命令式创建，04是 可视化工具创建
这里没有配置文件的文件夹。 - 先看下 package.json，这里并没有配置文件路径。
- 说明脚手架3版本创建的项目把配置文件给隐藏了，
隐藏路径：04-vuecli3test/node_modules/@vue/cli-service/webpack.config.js - 如何修改配置呢，继续往下看
六、vue项目管理器
- 通过命令
vue UI 进行启动服务 vue项目管理器。 - 有三个模块：项目、创建、导入
- 项目：vue项目管理器 进行管理 通过脚手架创建的项目
-
创建：脚手架3版本 可视化创建vue项目 - 导入： 没有通过脚手架3版本可视化创建的项目，是不会出现在项目模块中，可以通过导入进行使用
vue项目管理器 进行管理
- 点击项目，就进入了项目的管理界面，如下：
- 分析项目界面的五个模块
- 仪表盘：没什么好说的
- 插件： 可以看到已经安装的插件，也可以进行安装新插件
- 依赖： 可以看到已经安装的依赖包，也可以在此安装新依赖包，如axios、vue-router等
- 配置： 一些webpack的配置
- 任务： 启动项目等操作，对应
package.json 的 script 脚本操作。
七、脚手架3版本创建项目的配置文件配置
有三种 方式
1. vue项目管理器配置
通过 vue UI 命令启动 vue项目管理器 服务。
配置中修改，这里其实就是替换了项目中的webpack.config.js如下：
2. 脚手架2版本配置
- 脚手架2版本中，有两个文件build 和config 存放配置文件，
- 而在脚手架3版本中，是没有这两个配置文件的，而在被隐藏了
- 隐藏路径：
04-vuecli3test/node_modules/@vue/cli-service/webpack.config.js -
webpack.config.js 文件中又引入了其他文件。一层层的去调用和引用
3. vue.config,js
在项目根目录下创建配置文件 vue.config,js， 作为额外的 配置文件内容。
里面的内容会和 隐藏起来的配置文件内容 进行合并。
文件名称固定，不可以更改。
