初识Vue CLI

Vue CLI的使用

Vue CLI 2

创建项目

vue init webpack vueCLI2test

项目目录结构

runtimecompiler和runtimeonly的区别

同时新建两个项目，左为配置了runtimecompiler，右为配置runtimeonly，其余配置相同： 很明显这两种配置下的vue运行步骤不同，一个完整的Vue运行步骤如下：

runtimecompiler经历了完整的运行过程，而runtimeonly则是从render函数开始渲染，相比起来性能更高，代码更少。render函数的使用
但是runtimeonly模式下导入的组件APP里面也定义了template，那么template到render函数这部分是如何处理的呢？

答案是webpack的vue-template-compiler，通过vue-loader和vue-template-compiler的工作，.vue文件中的组件对象被解析成render函数。

npm run dev和npm run build的流程

Vue CLI 3

与Vue CLI 2的区别

目录结构

隐藏的配置

相比起CLI2，CLI3的宗旨就是零配置，它将配置文件隐藏到了如下文件夹：node_modules@vue\cli-service\package.json。

添加配置

在项目根目录下新建vue.config.js文件添加自定义配置，最后这些配置会被整合。