快捷導(dǎo)航

uniapp中全局頁(yè)面掛載組件實(shí)戰(zhàn)過(guò)程(小程序)

更新時(shí)間：2022年12月09日 15:59:55 作者：Front?End?Developer

這篇文章主要給大家介紹了關(guān)于uniapp中全局頁(yè)面掛載組件(小程序)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

步驟：

1.首先需要把uniapp項(xiàng)目初始化

npm init

2.下載所需庫(kù)

npm i vue-inset-loader

3.創(chuàng)建vue.config.js 文件

從HBuilder X創(chuàng)建的uniapp項(xiàng)目沒(méi)有vue.config.js文件所以需要建一個(gè)

const path = require('path')

module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.vue$/,
				use: {
					loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
				},
			}]
		},
	}
}

這里面的配置我也是研究了好久最后實(shí)驗(yàn)出這個(gè)可以用

4.創(chuàng)建組件

我們就新建一個(gè)test的組件吧

5.將組件引入到全局注冊(cè)

也就是在main.js文件中引入注冊(cè)組件

import test from '@/components/test/test.vue';
Vue.component('test', test)

除了這種全局引入注冊(cè)組件也可以在page.json文件中配置easycom

官方文檔

6.在pages.json文件中配置 insetLoader

	//在pages.json文件中新加insetLoader屬性
	"insetLoader": {
		//配置
		"config": {
			//將需要引入的組件名起了個(gè)confirm的名字在下面label中使用
			//右側(cè)"<test ref='confirm' />"為需要插入的組件標(biāo)簽
			"confirm": "<test ref='confirm' />"
		},
		// 全局配置  
		//需要掛在的組件名
		"label": ["confirm"],
		//根元素的標(biāo)簽類型 也就是插入到頁(yè)面哪個(gè)根元素下默認(rèn)為div 但是uniapp中需要寫(xiě)為view
		"rootEle": "view"
	},
	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				// 單獨(dú)配置，用法跟全局配置一致，優(yōu)先級(jí)高于全局
				"label": ["confirm"],
				"rootEle": "view"
			}
		}
	],

如果說(shuō)你不需要每個(gè)頁(yè)面都引入這個(gè)組件可以用單獨(dú)配置

但是這里我就覺(jué)得有點(diǎn)和以往的掛載一樣了都需要在頁(yè)面中配置