Vue Cli

Cli是Command-Line Interface，翻译为命令行界面，但是俗称脚手架。可以用来快速搭建Vue开发环境以及对应的webpack配置。

1、安装脚手架

npm install -g @vue/cli   ----安装脚手架最新版

安装Vue Cli2 链接：创建一个项目 | Vue CLI

2、初始化项目

vue create +项目名称    -----VueCli3及以上版本初始化项目

vue init webpack my-project   -----Vue Cli2初始化项目

3、vuecli2创建项目流程以及目录结构

创建项目流程：

 目录结构：

运行：

npm run dev

打包：

npm run build

 runtime+compiler和runtime-only的区别：

runtime+compiler：template->ast->render->virtual dom->真实DOM

new Vue({
  el:'#app',
  template:'<app/>',
  components:{
    app
  }
})

//template->ast->render->virtual dom->真实DOM

runtime-only[性能更高，代码量更少]：render->virtual dom->真实DOM

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})



//render->virtual dom[vdom]->真实DOM [UI]
//其中的h是createElement函数

createElement的用法：
1、createElement('标签',{标签属性},['']---标签内容)-----后两个属性可选
如果return createElement（'h2',{class:'box'},['内容']）
则h2会替换html里面的<div id="app"></div>中的div标签；

.vue文件中的template文件由谁处理?
是由vue-template-compiler解析成render函数的，APP里面不存在tempalte了因为转化成了render函数。

 4、VueCli3及以上的项目流程及目录结构

项目流程：

 目录结构：

5、运行Vuecli3级以上：

运行：

npm run serve

打包：

npm run build

6、Vuecli3及以上的配置：

vue ui

 修改配置可以创建一个vue.config.js文件：【后面会进行配置合并】

【如果是后面安装的插件，模块需要注意版本搭配问题】