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. CGI、ASP、PHP、JSP、 ASP.NET网站开发语言比较

    一.主流网站开发语言的简介及优缺点. 现在主流的网站开发语言主要包括cgi.asp.php.asp.net.jsp等. HTML:当然这是网页最基本的语言,每一个服务器语言都需要它的支持. (一)  ...

  2. postman断言分析

    最近测试中用到postman,使用后就简单总结下常用的断言,下面带图的自己最常用的,其他的没怎么用. postman断言是JavaScript语言编写的,在postman客户端指定区域编写即可. 断言 ...

  3. .net 音频转换 .amr 转 .mp3 （七牛转换法）

    .amr 用于移动设备的音频,压缩比比较大,多用于人声.通话,效果还行!所以,移动设备多采用amr格式来进行录存!比较常见的例子:通话录音,微信语音以及录音等! 这个鬼,用两个字来形容,就是“蛋疼”: ...

  4. git分支提交管理

    随着需求的增多,为了多人协作的顺利进行,需要进行分支开发,进而带来分支管理问题.今天主要讲一下如何管理分支及提交. 为了使git更好用,下面是我的git配置文件(放在C:\Users\Administ ...

  5. Map集合的实现类

    Map的继承关系: Map接口的常用实现类: 1.HashMap.Hashtable(t是小写) HashMap不是线程安全的,key.value的值都可以是null. Hashtable是线程安全的 ...

  6. iframe及其引出的页面跳转问题

    前提:在前一段的工作中碰到了一些页面跳转,子页面跳到父页面上的等等问题,当时页面总是跳不对,或者跳错,要不就是不需要重新打开窗口,却又重新打开一个了,特此搜寻网上各大博客论坛,加上项目经验整理一篇文章 ...

  7. VS2013编译libjpeg库

    第一步:找到刚刚解压出来的“jpeg-9a”文件夹下面的“makefile.vc”文件,用记事本或Notepad++等编辑工具打开,然后找到里面的“!include <win32.mak> ...

  8. Macbook air 上打开cocoscreator出错

    Error: EROFS: read-only file system, open '/Volumes/Cocos Creator/CocosCreator.app/Contents/Resource ...

  9. htm 中 <b>和<strong>的区别

    显示上两者没有任何区别,都是粗体<b>:为了加粗而加粗,推荐使用 css font-weight 属性来创建粗体文字.<strong>:为了强调而加粗,表示十分重要.在网页中使 ...

  10. 微信小程序 开放能力学习

    1. 用户信息小程序登录使用微信的个人信息快速搭建用户体系,登录逻辑:小程序向微信获取code 给服务端生成用户. 说明1. 小程序端调用 wx.login() 获取临时登录凭证 code,并传到服务 ...