近况

最近十分焦虑，vue还没学完，工作上还需要赶紧学SpringCloud，计划这周把vue博客笔记写完，
下周开始写vue实战项目，总之，尽快结束vue，然后10月份学习SpringCloud，在过年之前，学完Cloud！

Vue-Cli

vue-cli是vue的脚手架，Cli指的是Command-line interface,翻译为命令行界面，但是俗称脚手架
当我们使用vue开发大型应用时，脚手架能帮我们配置代码目录结构，项目结构和部署，热加载，代码单元测试等事情
使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置，下面是使用步骤：

  • 全局安装vue脚手架命令：npm install @vue/cli -g
  • 安装脚手架2(vue-cli2)模板
    当我们vue-cli版本是3时，和2的版本在使用命令上有些区别，所以如果你用的脚手架3但是却希望
    输入脚手架2的命令时也能成功执行，那么你需要全局安装一个依赖，npm install -g @vue/cli-init
    安装好后，使用脚手架2的命令也能成功被执行
  • 创建vue项目
    vue-cli2初始化项目：vue init webpack studyvuecli2 //项目名小写
    vue-cli3初始化项目：vue create studyvuecli3
    执行命令后，你可能需要配置一些vue项目中模块，按照操作配置即可。

下面是使用脚手架2命令创建项目的目录结构

通过脚手架2创建的项目，项目中有很多配置文件，下面来说说这些配置文件的含义：

  • build和config目录是webpack的配置文件，脚手架将webpack配置文件分离了，都放在这里
  • node_modules目录npm的本地安装位置，或者说局部安装
  • src中assets目录，主要放一部分图片，放在这里的图片，webpack会根据配置判断，
    图片是否会转成base64格式，如果图片小于我们的配置，则会被转成base64格式发送给浏览器
    如果图片大于我们的配置，则是浏览器请求url的方式获取图片。
  • src中components目录放我们的组件文件，以.vue结尾的文件，该文件是将以前写的组件抽出来成独立的JS文件
    src目录下还可以放更多其他目录，比如vue-router，vuex，axios的目录等等
  • static目录，放在该目录中的文件，会原封不动拷贝到dist目录中
  • .babelrc文件是es6转es5的配置文件
  • .editorconfig文件是项目文本相关的配置，规定项目文件的规则，例如代码缩进几个空格之类的
  • .postcssrc.js文件是css转化时的配置
  • package.json文件是npm用来管理项目的文件，记录着项目的一些依赖信息，这里的记录的依赖版本
    并不准确，如果想查看当前项目依赖的准确版本，可以查看package-lock.json文件

下面是使用脚手架3命令创建项目的目录结构

我们可以看到，Vue-cli3创建的项目没有了很多配置文件，解释一下其中配置文件的含义：

  • 这里的public目录对应着就是vue-cli2中的static目录，该目录的东西会原封不动拷贝到dist目录中
    webpack以生产模式启动项目就会生成dist目录，并将打包进该目录中。
  • .browserslistrc文件主要是当我们使用babel-loader时，将es6转成es5，而这个文件是配置
    哪些适配哪些浏览器，占市场多大的份额的浏览器，一般不动它
  • babel.config.js文件就是babel-loader的配置文件

我们可以发现，vue-cli3创建的项目的配置目录没有了，其实是脚手架给藏起来了，如果你想查看这些配置文件
你可以查看项目的以下目录找到它：node_modules/@vue/cli-service/lib/Service.js文件
或者你可以通过vue-cli3提供的图形化界面查看项目配置：vue ui，该命令会打开一个浏览器页面，可以查看安装依赖，
如果你想有一些自己的配置文件，你可以在项目根目录中创建vue.config.js文件，文件名是固定的
在其中导出自己的配置(和之前webpack.config.js一样写法)，之后在启动服务后，vue-cli会自动将vue.config.js与默认的配置进行合并

小提示：vue-cli3是基于webpack4打造的，vue-cli2是基于webpack3

runtimeCompiler与runtimeOnly的区别

我们在使用脚手架创建项目的时候，可能会有一个选择，让你选择是使用runtimeCompiler还是runtimeOnly方式构建我们的项目
首先来看看不同版本脚手架生成的src/main.js中有什么不同

//vue-cli2版本创建的项目中main.js
import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
/*
	在组件篇中，我们很少看到根组件中同时存在el和template属性，然而其实根组件是可以有template属性的
	根组件的template会在项目启动时替换掉el管理的div标签。
*/

//vue-cli3版本创建的项目中main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

/*
	可以看到非常的简便了，其实这里是通过不断的演化来的，来看看这里的配置如何演进的
	最开始：
		new Vue({
          el: '#app',
          components: { App },
          template: '<App/>'
        })
    然后：
    	new vue({
            el: '#app',
            render: h=>{	//render函数相当于template+components
              return h(App);
            }
        })
    再然后：
    	new vue({
            render: h=>{
              return h(App);
            }
        }).$mount('#app')	//$mount取代了el属性
     最后：
     	createApp(App).mount('#app')	//createApp函数封装了vue实例
*/

在使用vue-cli2创建的项目中的main.js，我们template代码，会被ast(abstract syntax tree抽象语法书)，然后再转成render函数
render函数再转成虚拟DOM(VDOM),最后转成真实DOM(UI)。这就是使用runtimeCompiler方式构建的项目解释template的方式，
而使用runtimeOnly方式构建的项目则直接从render函数开始，相比runtimeCompiler方式，节省了很多环节
所以使用runtimeOnly方式构建的项目比runtimeCompiler方式构建的项目要小大概10KB
使用runtimeOnly方式构建的项目，在main.js中的vue实例中，使用render函数代替了template，这个函数其实
是一个钩子函数，它接收一个对象，并根据我们的APP组件去调用函数，其实内部创建了一个<APP/>标签

总结：

  • 如果在之后的开发中，依然使用template，就选择runtime-Compiler方式构建项目
  • 如果在之后的开发中，使用.vue文件开发组件，那么可以选择runtime-only