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. 525 Contiguous Array 连续数组

    给定一个二进制数组, 找到含有相同数量的 0 和 1 的最长连续子数组.示例 1:输入: [0,1]输出: 2说明: [0, 1] 是具有相同数量0和1的最长连续子数组. 示例 2:输入: [0,1, ...

  2. RxJava+Retrofit实现网络请求

    RxJava+Retrofit实现网络请求: 首先要添加依赖 compile 'io.reactivex:rxjava:x.y.z' compile 'io.reactivex:rxandroid:1 ...

  3. Linux上不了网——wget无法解析主机

    很有可能是网关和域名服务器没有设置 1.设置网关 netstat -rn #查看网关配置情况 [hadoop@slave1 ~]$ route -n Kernel IP routing table D ...

  4. 【C#】枚举

    枚举 public static class CommonEnums { public enum people { /// <summary> ///男人 /// </summary ...

  5. 外文翻译 《How we decide》多巴胺的预言 第一节

    这是第二章的起始... 书的导言 1991年2月24日凌晨.第一与第二海军陆战队大批向北进入了沙特阿拉伯的沙漠地带,他们从这来进入科威特.这批军队是伊拉克入侵8个月以来,同盟国第一批进入科威特的部队. ...

  6. 使用gitblit 在windows平台搭建git服务器

    1.下载jdk,安装并且配置好环境变量 2.下载gitblit 直接解压无需安装 3.配置gitblit 1.修改gitblit安装目录下的data文件下的gitblit.properties.将in ...

  7. AJPFX总结Collection集合（上）

    出现集合类的原因 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一个方式. 数组和集合都是容器有何不同? 数组虽也可存储对象,但长度 ...

  8. [转]Android APK签名原理及方法

    准备知识:数据摘要 这个知识点很好理解,百度百科即可,其实他也是一种算法,就是对一个数据源进行一个算法之后得到一个摘要,也叫作数据指纹,不同的数据源,数据指纹肯定不一样,就和人一样. 消息摘要算法(M ...

  9. JDBC的fetchsize和maxrows

    在我们的项目开发中,可能有把SQL查询的结果保存到CSV然后提供下载的功能.当查询的结果集相当大的时候,很容易报内存不足错误(outofmemory).那该怎么解决这种情况的内存不足错误呢? 其实在J ...

  10. 看Spring Data如何简化数据操作

    Spring Data 概述 Spring Data 用于简化数据库访问,支持NoSQL 和 关系数据存储,其主要目标是使数据库的访问变得方便快捷. SpringData 项目所支持 NoSQL 存储 ...