Vue CLI相关

什么是Vue CLI

如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI

• 使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
• 如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置

Vue CLI使用前提 - Node

• 安装NodeJS
• 检测安装的版本
• 什么是NPM呢?
  • NPM的全称是Node Package Manager
  • 是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
  • 后续我们会经常使用NPM来安装一些开发过程中依赖包.

Vue CLI使用前提 - Webpack

• Vue.js官方脚手架工具就使用了webpack模板
  • 对所有的资源会压缩等优化操作
  • 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。
• Webpack的全局安装

npm install webpack -g

Vue CLI的使用

安装Vue脚手架

npm install -g @vue/cli

Vue CLI2初始化项目

vue init webpack my-project

Vue CLI3初始化项目

vue create my-project

Vue CLI2详解

目录结构详解

Runtime-Compiler和Runtime-only的区别

简单总结

• 如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler
• 如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

Runtime-Compiler

Runtime-only

为什么存在这样的差异呢？

• 我们需要先理解Vue应用程序是如何运行起来的。
• Vue中的模板如何最终渲染成真实DOM。

Vue程序运行过程

这幅图的意思是当我们把template模板，传给vue的时候，其实vue里面会做一个保存。保存到vue实例下的options，然后它会将这个template做一个parse(解析)，解析成ast（抽象语法树）。接着再做一个compile编译，编译成一个render函数。也就是说template会先转成ast，然后ast会再转成render函数。然后再通过render函数把我们对应的template最终翻译成一个virtual dom（虚拟dom树），有了这个虚拟dom树再渲染成真实dom，也就是显示在uI上面的东西
也就是

//Runtime-Compiler
template-->ast-->render-->vdom-->UI

而在我们的Runtime-only里面

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

它这个里面没有template，直接就是render，也就是它直接通过这个render函数把App变成vdom，然后这个虚拟dom直接到UI

//Runtime-only
render-->vdom-->UI

结论：

• Runtime-only性能更高，代码量更少
  
  可以看到Runtime-only轻了6kb，更加轻量级。

render: h => h(App),

这里的h其实是createElement

npm run build

npm run dev

修改配置：webpack.base.conf.js起别名

Vue CLI3

vue-cli 3 与 2 版本有很大区别
vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

目录结构详解

自定义配置：起别名