uniapp中全局頁面掛載組件實戰(zhàn)過程(小程序)
更新時間：2022年12月09日 15:59:55 作者：Front?End?Developer
這篇文章主要給大家介紹了關(guān)于uniapp中全局頁面掛載組件(小程序)的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
uniapp中頁面全局掛載組件
首先我說的方法不是全局引入注冊使用的時候把標(biāo)簽放在頁面中
所需庫 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' />"為需要插入的組件標(biāo)簽
"confirm": "<test ref='confirm' />"
},
// 全局配置
//需要掛在的組件名
"label": ["confirm"],
//根元素的標(biāo)簽類型 也就是插入到頁面哪個根元素下默認(rèn)為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.效果
完美引入?。。?/p>
8.注意：
1.在編輯vue.config.js和pages.json后需要重新啟動項目
2.這個方法僅限于vue版本為2和在小程序中使用
總結(jié)
到此這篇關(guān)于uniapp中全局頁面掛載組件的文章就介紹到這了,更多相關(guān)uniapp全局頁面掛載組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文記錄下JS中產(chǎn)生標(biāo)識符方式的演變，從ES5到ES6，ES5及其之前是一種方式，只包含兩種聲明（var/function），ES6則增加了一些產(chǎn)生標(biāo)識符的關(guān)鍵字，如 let、const、class。2015-06-06
今天移動端正好需要圖片觸摸滑動效果實現(xiàn)代碼，基于swiper實現(xiàn),需要的朋友可以參考下2018-05-05
es6 javascript對象Object.values() , Object.entr
這篇文章主要介紹了es6 javascript對象Object.values() , Object.entries()的示例代碼，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
使用JavaScript實現(xiàn)一個簡單的哈希映射功能
哈希表大家應(yīng)該都經(jīng)常用到吧,那么大家有沒有想過哈希表是怎么實現(xiàn)的呢,本文我們就來從一道簡單的題目來了解一下哈希表的簡單原理和實現(xiàn)吧2024-02-02
在本篇文章里小編給各位整理的是關(guān)于原生js實現(xiàn)文件上傳、下載、封裝等實例方法，需要的朋友們可以參考學(xué)習(xí)下。2020-01-01
這篇文章主要為大家詳細介紹了bootstrap select下拉搜索插件的使用方法，動態(tài)加載自己數(shù)據(jù)的二級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
JS實現(xiàn)的新浪微博大廳文字內(nèi)容滾動效果代碼
這篇文章主要介紹了JS實現(xiàn)的新浪微博大廳文字內(nèi)容滾動效果代碼,可實現(xiàn)頁面圖文元素定時滾動的效果,涉及JavaScript時間函數(shù)定時改變頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了JS對日期操作封裝代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
ionic js 上拉菜單(ActionSheet)通過往上彈出的框，來讓用戶選擇選項；點擊取消按鈕或者點擊空白的地方來讓它消失。本文給大家分享實現(xiàn)代碼，感興趣的朋友一起看看吧2016-06-06
狼人殺是一款多人參與的，通過語言描述推動、較量口才和分析判斷能力的策略類桌面游戲。本文將利用小程序?qū)崿F(xiàn)這一游戲，需要的可以參考一下2022-03-03