https://cn.vuejs.org/v2/guide/installation.html#运行时-编译器-vs-只包含运行时

文档中的这个地方,说的不清楚

If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build

这部分的意思是对于以下情况会用到compiler:

  有指定template

  没指定template,也没指定render(这时候使用的就是被挂载元素的outerHtml

所以,没有使用到compiler的情况只有:没有指定template,但指定了render。 这种情况并没有画到vue的生命周期图里,真的不容易发现。

有时候我们会遇到这样的错误:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

以上提到,解决这个问题有两种方式。到谷歌必应上搜索,99%的都选择了后者,也就是使用全功能的vue(runtime+compiler),这个版本的vue文件相比仅包含runtime的版本体积要大,而且运行时的compile转换会消耗性能,compile过程其实可以放到构建过程中进行。

总结就是:如果可以的话,尽量使用runtime版的vue文件。

以下演示一个简单的runtime版vue项目 :

项目初始化,前三个依赖是vue-loader的必备依赖

npm init -y && npm install --save-dev css-loader vue-loader vue-template-compiler vue

其余文件

// app.vue
<style scoped>
.title{
color:red;
text-align: center;
}
</style> <template>
<div class="title">
这是标题
</div>
</template> <script>
alert("标题初始化")
</script> // index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root">
<app></app>
</div>
</body>
<script src="bundle.js"></script>
</html> // main.js
import Vue from 'vue'
import app from './app.vue' // new Vue({
// el:"#root",
// render:function(c){
// return c("app")
// },
// components:{
// app
// }
// }); // 两种初始化方式都可以
new Vue(app).$mount("#root"); // webpack.config.js
module.exports = {
entry: {
bundle: './main.js'
},
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
extensions: [".vue",".js",".json"],
alias: {
'vue$': 'vue/dist/vue.runtime.js',
}
},
};

以上项目能正常运行。

compiler的作用在webpack引入 .vue文件的时候,就调用vue-loader来预处理过了,所以到了浏览器端运行的时候,仅仅引入vue.runtime就可以了

vue 运行时 + 编译器 vs. 只包含运行时的更多相关文章

  1. Create a Report at Runtime 在运行时创建报表

    In this lesson, you will learn how to create reports at runtime. A report showing a list of Tasks wi ...

  2. 在 Ubuntu 上安装 .NET SDK 或 .NET 运行时

    在wsl Ubuntu 20.04上面安装dotnet链接 https://docs.microsoft.com/zh-cn/dotnet/core/install/linux-ubuntu Ubun ...

  3. xmake v2.6.1 发布,使用 Lua5.4 运行时,Rust 和 C++ 混合编译支持

    xmake 是一个基于 Lua 的轻量级跨平台构建工具,使用 xmake.lua 维护项目构建,相比 makefile/CMakeLists.txt,配置语法更加简洁直观,对新手非常友好,短时间内就能 ...

  4. 大白话Vue源码系列(05):运行时鸟瞰图

    阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...

  5. clr(Windows 运行时和公共语言运行时)

    Windows 运行时   编译器使用 COM 引用计数机制来确定对象是否不再使用并可以删除. 因为从 Windows 运行时接口派生的对象实际上是 COM 对象,所以这是可行的. 在创建或复制对象时 ...

  6. Visual C++中对运行时库的支持

    原文地址:http://blog.csdn.net/wqvbjhc/article/details/6612099 一.什么是C运行时库 1)C运行时库就是 C run-time library,是 ...

  7. C运行时库(C Run-time Library)详解(提供的另一个最重要的功能是为应用程序添加启动函数。Visual C++对控制台程序默认使用单线程的静态链接库,而MFC中的CFile类已暗藏了多线程)

    一.什么是C运行时库 1)C运行时库就是 C run-time library,是 C 而非 C++ 语言世界的概念:取这个名字就是因为你的 C 程序运行时需要这些库中的函数. 2)C 语言是所谓的“ ...

  8. [转帖]运行时库(runtime library)

    运行时库(runtime library) https://blog.csdn.net/xitie8523/article/details/82712105 没学过这些东西 或者当时上课没听 又或者 ...

  9. JVM运行时数据区--方法区

    运行时数据区结构图(温习): 堆.栈.方法区的交互关系 方法区的理解 方法区(Method Area)与Java堆一样,是各个线程共享的内存区域 方法区在JVM启动时就会被创建,并且它的实际的物理内存 ...

随机推荐

  1. PJzhang:微信公众号短连接与微信好友验证

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/LPuYrDEyEXHyhcK3_HokSg 之前看到他们有人把微信公众号文章的长链接转为短链接,很受用,百度搜索一下方法, ...

  2. LuoguP2115 [USACO14MAR]破坏Sabotage【二分答案】By cellur925

    本来是想找一道生成树的题做的...结果被洛咕的标签骗到了这题...结果是二分答案与生成树一点mao关系都没有.... 题目大意:给你一个序列,请你删去某一个$l~r$区间的值($2<=i< ...

  3. Mantis优化改造(技术篇)

    为什么要写这篇? 既然都过去这么久了,都回忆不起来了,为什么还要整理出来这篇文章呢? 这还要追溯到2018年3月份. 当时换工作,面试了国内某知名电视厂商. 简历上面写了我优化改造了bug管理系统ma ...

  4. PHP读取MySQL数据

    方法/步骤     先配置一下数据库: define("DB_HOST","localhost");//数据库地址,一般为localhost define(&q ...

  5. scikit-learning教程(二)统计学习科学数据处理的教程二

    模型选择:选择估计量及其参数 得分和交叉验证的分数 如我们所看到的,每个估计者都会公开一种score可以判断新数据的拟合质量(或预测)的方法.越大越好. >>> >>&g ...

  6. Jamie and Binary Sequence (changed after round) - CodeForces 916B

    http://codeforces.com/problemset/problem/916/B 好尬啊... #include<cstdio> #include<algorithm&g ...

  7. 1-17finally关键字

    finally的特点 被finally控制的语句体一定会执行,除非在执行finally语句体之前JVM退出(比如System.exit(0)),一般用于关闭资源 finally如何使用? finall ...

  8. 1-10super和this关键字

    什么是super? super代表的是当前子类对象中的父类型特征. 什么时候使用super? 子类和父类中都有某个数据,例如,子类和父类中都有name这个属性.如果要再子类中访问父类中的name属性, ...

  9. h5-15-svg格式图片

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. Squid启动报:Could not determine this machines public hostname. Please configure one or set 'visible_hostname'.

    在squid.conf中添加 visible_hostname squid.packet-pushers.net 或者编辑/etc/hosts文件, 在该文件中制定主机IP地址与主机名的对应.