當前位置：首頁 > 前端技术 > vue >内容正文

vue

mpvue template compiler 中文版教程

發布時間：2024/9/21 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 mpvue template compiler 中文版教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

| 這個包是自動生成的，拉取需求請查看：src/platforms/mp/entry-compiler.js.

此包可用來將 Vue 2.0 的模板預編譯成渲染函數，以避免運行時編譯的開銷和CSP（網頁安全政策）的限制。當你正在編寫具有特定需求的構建工具時，才會需要它。大多數情況下，你應該使用 mpvue-loader，兩者都在內部使用了此包。

安裝

npm install mpvue-template-compiler

const compiler = require('mpvue-template-compiler')

API

compiler.compile(template, [options])

編譯模板字符串并返回已編譯的JavaScript代碼。返回結果是以下格式的對象：

{ast: ?ASTElement, // 將模板元素解析為AST（抽象語法樹）render: string, // 主渲染函數代碼staticRenderFns: Array<string>, // 靜態子樹的渲染代碼（如有）errors: Array<string> // 模板語法錯誤（如有） } 復制代碼

請注意返回的函數代碼使用了 with ，因此不能在嚴格模式下使用。

Options

可以鉤入編譯過程以支持自定義模板功能。但是請注意，通過注入自定義編譯時模塊，你的模板將無法與基于標準內置模塊構建的其他構建工具一起使用，例如 mpvue-loader 和 vueify 。

可選的 options 對象可以包含以下內容：

modules

一組編譯器模塊。詳細信息，請參閱 flow declarations 和 built-in modules 中的 ModuleOptions 類型。

directives

一個對象，其中鍵是指令名稱，值是轉換模板AST節點的函數。例如：

js compiler.compile('<div v-test></div>', { directives: { test (node, directiveMeta) { // 基于directiveMeta的轉換節點 } })

默認情況下，編譯時指令會提取指令，并且該指令將不會出現在運行時。如果希望指令也由運行時定義處理，則在轉換函數中返回 true 。

請參閱一些內置編譯時指令的實現 built-in compile-time directives。

preserveWhitespace

默認為 true 。這意味著編譯的渲染函數接受HTML標記之間的所有空格。如果設置為 false ，則將忽略標記之間的所有空格。這可以帶來稍微更好的性能，但可能會影響內聯元素的布局。

compiler.compileToFunctions(template)

與 compiler.compile 類似，但直接返回實例化的函數：

{ render: Function, staticRenderFns: Array<Function> }

這僅在使用預配置構建的運行時有作用，因此它不接受任何編譯時選項。此外，此方法使用 new Function() ，因此它不適用于CSP。

compiler.ssrCompile(template, [options])

| 2.4.0+

與 compiler.compile 相同，但通過將模板的各部分優化為字符串連接，來生成特定的SSR渲染函數代碼，以提高SSR性能。

這在 vue-loader@>=12 中默認使用，并且可以使用 optimizeSSR 選項禁用。

compiler.ssrCompileToFunction(template)

| 2.4.0+

與 compiler.compileToFunction 相同，但通過將模板的各部分優化為字符串連接，來生成特定的SSR渲染函數代碼，以提高SSR性能。

compiler.parseComponent(file, [options])

將SFC（單文件組件或 *.vue 文件）解析為描述符（請參閱 flow declarations 中的 SFCDescriptor 類型）。這用于SFC構建工具，如 vue-loader 和 vueify 。

Options

**pad**

當你將提取的內容傳送到其他預處理器時， pad 非常有用，因為如果有任何語法錯誤，你會知道正確的行號或字符索引。

使用 { pad：“line” } ，每個塊的提取內容將以原始文件的前導內容中每行的一個換行符為前綴，以確保行號與原始文件相符。
使用 { pad：“space” } ，每個塊的提取內容將為原始文件的前導內容中的每個字符添加一個空格，以確保字符計數與原始文件保持一致。

compiler.compileToWxml(compiled, [options])

將AST（抽象語法樹）解析為字符串，該字符串是WXML（WeiXin標記語言）文件的字符串類型。這是在使用函數 compiler.compile(template，[options]) 編譯成AST的模板之后使用的。

compiled

compiled是 compiler.compile 的結果，使用此函數可以編譯模板字符串。