vue-cli4.0的安装和使用

1.安装全局cli

安装cli：npm install -g @vue/cli
查看版本：vue --version

2.创建项目

命令：vue create my-project（项目名,禁止大写）

image.png

default：默认配置
Manually：手动配置

3.创建项目时Runtime + compiler和Runtime-only选项的区别

image.png

render函数是用来创建html模板，右边图中render函数等价于

image.png

createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数。
createElement约定的简写为h。

1、区别一

通过这两种方法创建的脚手架，区别在于main.js（在src文件夹中）

在Vue实例中，runtime-compiler创建的项目中参数是：

components和template

runtime-only创建的项目中参数为：
　　　　　　render函数

2、组件的渲染过程

组件是如何被渲染到页面中的？
　　　　template ---> ast ---> render ---> vDom ---> 真实的Dom ---> 页面

ast：抽象语法树

vDom：虚拟DOM
3、runtime-only

·我们在使用runtime-only的时候，需要借助webpack的loader工具，将.vue文件编译为javascript，因为是在编译阶段做的，所以他只包含运行时的vue.js代码，所以代码体积会更轻量

·再将.vue 文件编译为javascript文件的过程当中会将组件的template模板编译为render函数，所以我们得到的是render函数的版本

运行的时候是不带编译的，编译是在离线的时候做的

·template会通过vue-template-compiler转换为render函数

4、runtime-compiler

·在vue中，最终渲染都是通过render函数，如果写template属性，则会编译为render函数，那么这个编译过程会在运行时发生，所以需要带有编译器的版本

·编译过程会对性能有一定的损耗
结论：

runtime-only：将template在打包的时候，就已经编译为render函数

runtime-compiler：在运行的时候才去编译template

结果：

发布生产的时候，runtime-only构建的项目代码体积更小，运行速度更快

推荐使用runtime-only函数
转自：https://juejin.im/post/5dd6008cf265da47d67c214f

4.vue项目图形化管理

终端命令：vue ui
所有的配置文件都可以在里面修改

5.手动更改配置文件

在根目录下创建vue.config.js文件，通过module.exports={}导出

6.项目文件说明

image.png

7.打包文件说明

image.png