简介
vue-template-compiler 是一个可以将 Vue 模板编译为渲染函数的 npm 包。这个包在开发过程中经常用到，它可以将类似于以下模板内容：
<template>
<div>{{ message }}</div>
</template>转换成如下的渲染函数：
function render() {
with (this) {
return _c("div", [_v(_s(message))]);
}
}这样就可以在 Vue 应用程序中使用该渲染函数并进行渲染。
安装
可以通过以下命令来安装 vue-template-compiler：
npm install vue-template-compiler --save-dev
使用方法
在构建系统中使用
如果你正在使用基于 Webpack 的构建系统，可以使用 vue-loader 将 .vue 文件编译为 JavaScript 模块。在 vue-loader 中内置了 vue-template-compiler，所以无需手动安装。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-- --- ----- -----
-
----- ---------
------- ------------
-
-
-
-直接使用
如果你想直接使用 vue-template-compiler，可以使用以下代码：
const compiler = require('vue-template-compiler');
const template = '<div>{{ message }}</div>';
const compiled = compiler.compile(template);
console.log(compiled.render);上述代码会将 template 编译为渲染函数，并输出渲染函数。
使用 Vue CLI
如果你使用的是 Vue CLI 创建的项目，可以在 vue.config.js 文件中配置 vue-template-compiler：
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
-------------
------------
------------------
------------ -- -
----------------------- - -
------------------- -----
--
------ --------
--
-
--上述代码会将 preserveWhitespace 设置为 false，这样就不会在编译后的模板中保留空白符号。
示例代码
以下是一个使用 vue-template-compiler 的示例代码：
-- -------------------- ---- -------
----- -------- - ---------------------------------
----- -------- - -------- ------- ----------
----- -------- - ---------------------------
--- -----
------ -
------ -
-------- ------- -------
--
--
------- ---------------
------------------这个代码片段定义了一个包含一个变量的 Vue 模板，然后通过 vue-template-compiler 编译该模板并渲染到页面上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/48446