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. React的深入浅出

    react组件重新渲染有两种途径:1.自身调用setState:2.父组件传入新的props.3.但这两种途径都不会必然调用render而引起重新渲染, 都会先经过shouldComponentUpd ...

  2. P1226神经网络

    提交了7次,看了无数题解,要死啊~~~.(无限吐槽这道题...) 据说是Toposort,我其实也不是很清楚,反正BFS就可以过:写题之前先把题看懂: 根据公式,因为入度为零的点不会被传递,所以阈值是 ...

  3. 二分图最大匹配初探 By cellur925

    一.什么是二分图 首先它需要是一张无向图. 之后它需要同时满足两个条件:①它的N个点被分为两个集合,且这两个集合交集为空:②同一集合内的点之间没有边相连. 二.无向图是否为二分图的判定 引理:无向图是 ...

  4. Python 字符串太长分行写

    原文:https://blog.csdn.net/peng__dada/article/details/79138135 #第一种:三个单引号 print '''我是一个程序员       我刚开始学 ...

  5. 1051：A × B problem 大数相乘

    给你两个整数,请你计算A × B. 输入 数据的第一行是整数T(1 ≤ T ≤ 20),代表测试数据的组数.接着有T组数据,每组数据只有一行,包括两个非负整数A和B.但A和B非常大,Redraimen ...

  6. Party Games UVA - 1610

    题目 #include<iostream> #include<string> #include<algorithm> using namespace std; // ...

  7. 区间dp实战练习

    题解报告:poj 2955 Brackets(括号匹配) Description We give the following inductive definition of a “regular br ...

  8. Xcode7.1环境下上架iOS App到AppStore 流程 转

    来自:http://www.cnblogs.com/ChinaKingKong/p/4957682.html 前言部分 之前App要上架遇到些问题到网上搜上架教程发现都是一些老的版本的教程 ,目前iT ...

  9. jmeter（十八）属性和变量

    一.Jmeter中的属性: 1.JMeter属性统一定义在jmeter.properties文件中,我们可以在该文件中添加自定义的属性 2.JMeter属性在测试脚本的任何地方都是可见的(全局),通常 ...

  10. configure: error: MySQL library not found

    在CentOS系统中,安装zabbix进行configure时会遇到以下问题 ./configure --enable-server --enable-agent --with-mysql --wit ...