这个软件包是自动生成的。请参阅src / platforms / web / entry-compiler.js。 该包可用于将Vue 2.0模板预编译为渲染函数,以避免运行时编译开销和CSP限制。如果您正在编写具有特定需求的构建工具,则只需要它。在大多数情况下,您应该使用vue- loader或vueify替代,两者都在内部使用此包。
安装
npm install vue-template-compiler
const compiler = require('vue-template-compiler')
API
compiler.compile(template,[options]) 编译模板字符串并返回已编译的JavaScript代码。返回的结果是以下格式的对象:
{
ast: ?ASTElement, // parsed template elements to AST
render: string, // main render function code
staticRenderFns: Array<string>, // render code for static sub trees, if any
errors: Array<string> // template syntax errors, if any
}
注意返回的功能代码使用with,因此不能在严格的模式代码中使用。
选项
可以挂钩编译过程来支持自定义模板功能。但是,请注意,通过注入自定义编译时模块,您的模板将不能与其他构建于标准内置模块(例如vue- loaderand)的构建工具一起使用vueify。 可选options对象可以包含以下内容: * modules 一组编译器模块。有关编译器模块的详细信息,请参阅流程声明中的ModuleOptions类型和内置模块。 * directives 一个对象,其中键是指令名称,值是转换模板AST节点的函数。例如:
compiler.compile('<div v-test></div>', {
directives: {
test (node, directiveMeta) {
// transform node based on directiveMeta
}
}
})
默认情况下,编译时指令将提取指令,并且指令不会在运行时出现。如果您希望指令也由运行时定义处理,请true在转换函数中返回。 参考一些内置的编译时指令的实现。
- preserveWhitespace 默认为true。这意味着编译后的渲染函数会保留HTML标签之间的所有空白字符。如果设置为false,标签之间的空白将被忽略。这可能会使性能稍微好一些,但可能会影响内联元素的布局。
compiler.compileToFunctions(模板)
类似于compiler.compile,但直接返回实例化的函数:
{
render: Function,
staticRenderFns: Array<Function>
}
这在运行时仅适用于预配置构建,因此它不接受任何编译时选项。另外,这种方法使用的new Function()不是CSP兼容的。 来源:https://www.npmjs.com/package/vue-template-compiler