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. 一类 O(1) 算法的总结

    这里要注意一下, 一部分 O(1) 算法是需要 \(O(n)\) 或者 \(O(\sqrt n)\) 预处理的... 1. O(1) 求 1~n 的异或和: inline int calc(R int ...

  2. Adding New Machine ZOJ - 3540

    https://vjudge.net/problem/ZOJ-3540 错误记录: 扫描线没有考虑到同一行的要删除在前,加入在后:由于用了特殊的方式所以想当然以为不需要考虑这个问题 #include& ...

  3. 谷歌编码风格内容，新建一个xml文件，复制进去就可以在eclipse里面用了，命名--eclipse-java-google-style.xml

    <?xml version="1.0" encoding="UTF-8" standalone="no"?> <profi ...

  4. 关于提示replication性能

    关于GTIDs的二进制日志:gtid_next: 下一个事务的编号,是master传给slave的 如SET @@SESSION.GTID_NEXT= 'c09756b8-a7e7-11e5-9468 ...

  5. P1984 [SDOI2008]烧水问题

    题目描述 把总质量为1kg的水分装在n个杯子里,每杯水的质量均为(1/n)kg,初始温度均为0℃.现需要把每一杯水都烧开.我们可以对任意一杯水进行加热.把一杯水的温度升高t℃所需的能量为(4200*t ...

  6. 访问github.com太慢的解决方法

    修改 c:\windows\system32\drivers\etc\host文件添加 192.30.255.112 github.com 151.101.72.249 github.global.s ...

  7. Spring Boot 注册 Servlet 的三种方法，真是太有用了！

    本文栈长教你如何在 Spring Boot 注册 Servlet.Filter.Listener. 你所需具备的基础 什么是 Spring Boot? Spring Boot 核心配置文件详解 Spr ...

  8. canvas绘制基础

    初始接口 <body> <canvas id=“canvas”></canvas> <script> var canvas = document.get ...

  9. jQuery ajax参数后台获取不到的问题

    <script type="text/javascript"> init(); var alldate = {a : "0",b:"1&q ...

  10. C++#pragma pack指令

    微软官方文档说#pragma pack 指令的作用是为结构.联合和类成员指定 pack 对齐.的主要作用就是改变编译器的内存对齐方式,这个指令在网络报文的处理中有着重要的作用,#pragma pack ...