浅谈vue的两种编译模式---七日打卡

前言

vue的编译模式分为：

$1.\text{完整版}$1.完整版(同时包含运行时版本和编译器)
$2.\text{只包含运行时版本}$2.只包含运行时版本(用来创建Vue实例，渲染并处理虚拟DOM等的代码,基本上就是除去编译器的其它一切)。

$\text{编译器}$编译器: 用来将模板字符串编译为JS渲染函数的代码

用法:

一、完整版

在页面中直接通过script标签引入的vue.js文件就是完整版的。完整版既可以使用render 函数,也可以使用 template 模板。

二、只包含运行时版本

我们自己手动通过 webpack 配置的打包环境中，通过 import Vue from ‘vue’导入的Vue就是运行时版本,也就是：vue.runtime.esm.js，这种情况下只能使用 render 函数来渲染组件。

由vue的两种编译模式,可以引出vue的两种构建版本的区别：

示例：

1、需要编译器的写法

new Vue({
  template: '<div>{{ hi }}</div>'
})

2、运行时写法:

new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。(因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。)

如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：
vue.config.js中配置如下:

module.exports = {
	configureWebpack:{
		resolve: {
    			alias: {
      			   'vue$': 'vue/dist/vue.esm.js' 
   			 }
 		 }
	}
}

vue-loader是什么:

vue-loader是基于webpack的一个的loader,用于解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。核心的作用，就是$\text{提取}$提取。
简而言之 vue-loader就是用于把.vue 文件内部的模板在构建时预编译成 JavaScript

vue-loader的作用如下:(来自官网)
1、允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用plugin

2、允许在一个.vue文件中使用自定义块，并对其运用自定义的loader链

3、使用 webpack loader 将 <style> 和 <template> 中引用的资源当作模块依赖来处理

4、为每个组件模拟出 scoped CSS 5、在开发过程中使用热重载来保持状态。