uniapp中頁面全局掛載組件
首先我說的方法不是全局引入注冊使用的時候把標簽放在頁面中
所需庫 vue-inset-loader
步驟：
1.首先需要把uniapp項目 初始化
npm init
2.下載所需庫
npm i vue-inset-loader
3.創(chuàng)建vue.config.js 文件
從HBuilder X創(chuàng)建的uniapp項目沒有vue.config.js文件 所以需要建一個
const path = require('path')
module.exports = {
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
use: {
loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
},
}]
},
}
}
這里面的配置我也是研究了好久 最后實驗出這個可以用
4.創(chuàng)建組件
我們就新建一個test的組件吧
5.將組件引入到全局注冊
也就是在main.js文件中引入注冊組件
import test from '@/components/test/test.vue';
Vue.component('test', test)
除了這種全局引入注冊組件也可以在page.json文件中 配置easycom
官方文檔
6.在pages.json文件中配置 insetLoader
//在pages.json文件中新加insetLoader屬性
"insetLoader": {
//配置
"config": {
//將需要引入的組件名起了個confirm的名字在下面label中使用
//右側(cè)"<test ref='confirm' />"為需要插入的組件標簽
"confirm": "<test ref='confirm' />"
},
// 全局配置
//需要掛在的組件名
"label": ["confirm"],
//根元素的標簽類型 也就是插入到頁面哪個根元素下默認為div 但是uniapp中需要寫為view
"rootEle": "view"
},
"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
// 單獨配置，用法跟全局配置一致，優(yōu)先級高于全局
"label": ["confirm"],
"rootEle": "view"
}
}
],
如果說你不需要每個頁面都引入這個組件 可以用單獨配置
但是這里我就覺得有點和以往的掛載一樣了 都需要在頁面中配置
7.效果
完美引入！??！文章來源：http://www.zghlxwxcb.cn/news/detail-406153.html
8.注意：
1.在編輯vue.config.js和pages.json后需要重新啟動項目
2.這個方法僅限于vue版本為2和在小程序中使用
3.
點個關(guān)注支持一下我吧
文章來源地址http://www.zghlxwxcb.cn/news/detail-406153.html
到了這里，關(guān)于uniapp中全局頁面掛載組件（小程序）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
