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

paodan
2,228 阅读2分钟

前言

vue的编译模式分为：

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

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

用法:

一、完整版

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

二、只包含运行时版本

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

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

比较维度完整版运行时版
特点包含compiler没有compiler
视图写在HTML中或者写在template中写在render函数里用h来创建标签
CDN用法vue.jsvue.runtime.js
webpack用法需要配置alias默认使用运行时版本
@vue/cli用法需要额外配置默认使用运行时版本

示例：

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 去处理。核心的作用，就是提取\color{red}{提取}。
简而言之 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、在开发过程中使用热重载来保持状态。

avatar
文章
阅读
粉丝