前言

在分析一個(gè)項(xiàng)目的時(shí)候,發(fā)現(xiàn)項(xiàng)目中使用了一個(gè)組件,在 components 中沒有找這個(gè)組件的注冊(cè)位置,發(fā)現(xiàn)這是 uview-ui 中的組件

<view>
	<u-notice-bar mode="horizontal" :list="noticeList"></u-notice-bar>
</view>

很明顯,這里的 u-notice-bar 是一個(gè)組件,但是在 components 中并沒有注冊(cè)的語句,猜測(cè)是不是全局引入,或者是 easycom 模式自動(dòng)引入了,按照 easycom 模式可以自動(dòng)引入組件的命名規(guī)則中的 components/a/a.vue 來去找 u-notice-bar 還是沒有找到
最終發(fā)現(xiàn)使用的是 uniapp 的 uview-ui 組件

一、uview-ui是什么？

uview-ui 是 uniapp 生態(tài)中的框架 uview官網(wǎng)鏈接
uni-app2018年初發(fā)布以來，一直蓬勃發(fā)展，一派欣欣向榮，社區(qū)也是人聲鼎沸，眾望所歸。
因此，uView應(yīng)運(yùn)而生，uView的目標(biāo)是成為uni-app生態(tài)最優(yōu)秀的UI框架。

二、使用步驟

1. 下載步驟

1.在 HbuilderX中創(chuàng)建 uniapp 項(xiàng)目

2. 在 uview官網(wǎng)鏈接 中導(dǎo)入插件

報(bào)錯(cuò)

解決方案 : 關(guān)閉 HbuilderX 右鍵,以管理員身份運(yùn)行

3. 將 uview-ui 移動(dòng)到根目錄下

2. 配置步驟

2.1 引入 uView 主 JS 庫

在項(xiàng)目的根目錄中的 main.js 中,引入并使用 uView 的 JS 庫 ,注意應(yīng)當(dāng)在 import Vue 之后

// main.js
import uView from 'uview-ui';
Vue.use(uView)

2.2 引入 uView 的全局 SCSS 主題文件

在項(xiàng)目根目錄的 uni.scss中引入此文件.
錯(cuò)誤引入

/** uni.scss 錯(cuò)誤引入*/
@import url("uview-ui/theme.scss");

正確引入

/** uni.scss 錯(cuò)誤引入*/
@import "uview-ui/theme.scss";

2.3 引入 uView 基礎(chǔ)樣式

在 App.vue 中首行的位置引入,注意給 style 標(biāo)簽加入 lang='scss’屬性

/*App.vue*/
<style lang='scss'>
	/*每個(gè)頁面公共css */
	/* 這里需要注意寫在第一行,同時(shí)給 style 標(biāo)簽加入lang='scss'屬性  */
	@import "uview-ui/index.scss"
</style>

2.4 配置 easycom 組件模式

在 pages.json 中配置 easycom 組件模式

• uni-app 為了調(diào)試性能,修改 easycom 規(guī)則不會(huì)實(shí)時(shí)生效,配置完成之后,需要重啟 HX 或者重新編譯項(xiàng)目才能正常使用 uView 的功能
• 需要確保 pages.json 中只有一個(gè) easycom 字段,否則需要自行合并多個(gè)引入規(guī)則。

// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [....原有的內(nèi)容],
	"globalStyle": {....原有的內(nèi)容},
		........原有的內(nèi)容
}

3、完成以上配置后，在頁面中使用組件測(cè)試是否成功

<template>
	<view class="index">
		<u-button >默認(rèn)按鈕</u-button>
		<u-button type="primary">主要按鈕</u-button>
		<u-button type="success">成功按鈕</u-button>
		<u-button type="info">信息按鈕</u-button>
		<u-button type="warning">警告按鈕</u-button>
		<u-button type="error">危險(xiǎn)按鈕</u-button>
	</view>
</template>

完成 ~

4. 圖標(biāo)使用

<u-icon name="level"></u-icon>

文章來源地址http://www.zghlxwxcb.cn/news/detail-471061.html

到了這里，關(guān)于uView-ui框架測(cè)試使用筆記的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！