在 uni-app 項目中，很多時候我們都需要一些全局統一樣式的交互效果，比如 loading 及各種彈窗交互提示等。當然，大部分的項目我們都會使用 uni 自帶 API 如：

uni.showLoading({title: '加載中',mask: true });

這些 API 我們稍加封裝就可以用的很 happy 了，如：

this.$loading('加載中', true)

但是實際上，有時候這個 loading 效果并不是我們想要的。除了 loading ，還有 toast 、model 。這些自帶的交互效果編譯到各端后的效果并不一樣，顯然這并不是我們想要的。而且即使是開發某一端，比如小程序。有時候我們也需要自定義這些交互效果。

比如 UI 設計的 loading 是一張 Gif 動圖。產品希望 loading 開始結束時有淡入淡出效果。而且整個 App 所有的 loading 是統一的。當然更有時候除了loading，甚至toast 、model 等交互效果都是如此。

以 loading 舉例。我們通常的做法是，在 components 文件夾中定義一個組件，在需要的地方調用。比如這里叫：custom-loading，同時在里面定義了 show/hide 方法：

<template><view v-if="isShow" class="custom-loading"><image src="../../loading.gif"></image></view> </template><script>export default {data() {return {isShow: false};},methods: {show() {this.isShow = true},hide() {this.isShow = false}}} </script><style lang="scss" scoped>.custom-loading {top: 0;left: 0;right: 0;bottom: 0;z-index: 2;display: flex;position: fixed;align-items: center;justify-content: center;image {width: 98px;height: 98rpx;}} </style>

使用時只需要在 template 中聲明：

<custom-loading ref="custom-loading" />

在需要的時候調用：

this.$refs['custom-loading'].show()

到這里，一切都沒有問題。當然，聰明的你一定知道像這種使用頻率比較高的組件。最好將其定義為全局組件，就可以省略組件內的 import 。但是在使用時，還是需要在 template 中聲明：

<template><!-- ... --><custom-loading ref="custom-loading" /><!-- ... --> </template>

那如果還有 custom-toast、custom-model 等，而且需要用到這些公共組件的頁面會有很多。比如... 100多個。難道要在每個頁面的 template 中都寫上：

<custom-loading ref="custom-loading" /> <custom-toast ref="custom-toast" /> <custom-model ref="custom-model" />

很明顯，這些代碼是多次重復的。如果你不想敲，可以用 plop 幫你生成帶有以上代碼的 tamplate。但是在我看來，這些代碼實際上并不需要出現在 template 中，但是最好還能實現其相應的功能。

簡單的說，就是我沒有在 template 中寫：

<custom-loading ref="custom-loading" />

但是卻能在 methods 中調用：

this.$refs['custom-loading'].show()

它不在那里，實際上它在那里。

amazing ？ 其實很簡單。看標題你可能也猜到了：

custom-loading 組件實際是在 vue-template-compiler 的 compile 方法編譯一個 template 前手動將 <custom-loading ref="custom-loading"/> 插入到 template 中。

好了，謎底已經揭曉，看看怎么使用吧，其實很簡單。

如果你比較細心，在 vue-cli 文檔中關于 webpakc 的配置中有這么一個例子：

// vue.config.js module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {// 修改它的選項...return options})} }

這里我們將 options 打印出來一睹真容：

沒錯，options 里面竟然有 vue-template-compiler 對象！！！

注意：這種情況只有在 uni-app 中才會發生。非 uni-app 項目的 options 沒有這種情況

既然能拿到 compiler 對象。我們就可以在 vue-template-compiler 將 template 模板轉換為 AST 樹之前往 template 中加點料。而將 template 模板轉換為 AST 樹的執行者就是 compiler 對象中的 compile 方法。因此，只要重寫 compile 方法。

其實這種事情，還是比較常見的。Vue 2.X 對數組類型的數據結構的監聽就是用重新數組原型方法實現的。

有了思路，實現起來就很快了：

// vue.config.js module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {const compile = options.compiler.compileoptions.compiler.compile = (template, ...args) => {if (args[0].resourcePath.match(/^pages/)) {template = template.replace(/[sS]+?<[dD]+?>/, _ => `${_}<custom-loading ref="custom-loading" />`)}return compile(template, ...args)}return options})} }

好了。這樣配置之后，所有頁面的 template 中都無需寫：<custom-loading ref="custom-loading"/> ，也可以通過 $ref 拿到。但是前提是要將 custom-loading 注冊為全局組件或遵循 easycom 。

最后，你當然可以把調用 loading 的操作再次封裝：

this.$refs['custom-loading'].show() // => this._$loading()

好了，這就是 vue-template-compiler 在 uniapp 中我個人的一次使用。個人覺得還是非常方便。當然關于 vue-loader 和 vue-template-compiler 的使用網上已經有很多文章了，這里就不展開了。最后，這里有一個我個人用 uniapp 寫的小程序，里面已經用到了這種方式。源碼在：https://github.com/yinchengnuo/templateWxappUniapp 歡迎 start

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue 非template模式_vue-template-compiler 还能这么用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。