@twaves/vue3-inset-loader
v0.0.1
Published
uni-app(vite)小程序
Downloads
3
Readme
vue3-inset-loader
编译阶段在 sfc 模板指定位置插入自定义内容,适用于 vite 构建的 vue 应用,常用于小程序需要全局引入组件的场景。(由于小程序没有开放根标签,没有办法在根标签下追加全局标签,所以要使用组件必须在当前页面引入组件标签)
因为 vue-inset-loader 不支持 vue3 + vite ,我就改了下,现在只支持 vue3 + vite 了
第一步 安装
将文件放在 plugins/vue3-inset-loader 下
安装依赖
pnpm i [email protected] @vue/compiler-sfc -D
第二步 vite.config.js 注入 loader
import { defineConfig } from 'vite'
import vue3InsetLoaderPlugin from './plugins/vue3-inset-loader'
// https://vitejs.dev/config/
export default defineConfig({
build: {
sourcemap: process.env.NODE_ENV === 'development',
},
plugins: [
// 注入loader,放在plugins的首位
vue3InsetLoaderPlugin
],
})
第三步 pages.json 配置文件中添加 insetLoader
"insetLoader": {
"config":{
"confirm": "<BaseConfirm ref='confirm'></BaseConfirm>",
"abc": "<BaseAbc ref='BaseAbc'></BaseAbc>"
},
// 全局配置
"label":["confirm"]
},
"pages": [
{
"path": "pages/tabbar/index/index",
"style": {
"navigationBarTitleText": "测试页面",
// 单独配置,用法跟全局配置一致,优先级高于全局
"label": ["confirm","abc"]
}
},
]
第四步
全局引入通用组件(main.js)
import XToast from './components/XToast/index.vue'
const app = createSSRApp(App);
app.component('x-toast', XToast);
配置说明
config
(default:{}
) 定义标签名称和内容的键值对label
(default:[]
) 需要全局引入的标签,打包后会在所有页面引入此标签
✔ label
和 支持在单独页面的 style 里配置,优先级高于全局配置