vue3使用uView與uv-ui的詳細(xì)步驟
摘要：
文檔只有vue2的語法，并且uView與uv-ui雖然類似，但是還是兩個東西的！
vue3使用uView
在 Vue3 中使用 uView 是非常常見的需求，uView 是基于 uni-app 生態(tài)的 UI 組件庫，專門為移動端開發(fā)設(shè)計(jì)，Vue3 版本對應(yīng)的是 uView Plus（uView 2.x），下面我會一步步教你完整的集成和使用流程。
一、環(huán)境準(zhǔn)備
確保你的項(xiàng)目滿足以下條件：
uni-app 項(xiàng)目（基于 Vue3 + Vite 或 Vue3 + Webpack）
Node.js 版本 ≥ 14.0.0
已安裝 HBuilderX 或使用 CLI 方式開發(fā)
二、安裝 uView Plus
方式 1：npm 安裝（推薦）
在項(xiàng)目根目錄執(zhí)行以下命令：
# 安裝 uView Plus npm install uview-plus # 如果是 Vue3 + TS 項(xiàng)目，還需安裝類型聲明 npm install -D @types/uview-plus
方式 2：手動下載
從 uView 官網(wǎng) 下載源碼，將 uview-plus 文件夾復(fù)制到項(xiàng)目的 components 目錄下。
三、全局配置（關(guān)鍵步驟）
- 引入 uView Plus 主庫
在項(xiàng)目的 main.js（或 main.ts）中添加以下代碼：
import { createSSRApp } from 'vue'
import uviewPlus from 'uview-plus'
export function createApp() {
const app = createSSRApp(App)
// 全局注冊 uView Plus
app.use(uviewPlus)
return {
app
}
}- 引入全局樣式
在項(xiàng)目的 App.vue 中，在
<style lang="scss">
/* 引入 uView Plus 全局樣式 */
@import "uview-plus/index.scss";
/* 你的自定義樣式 */
page {
background-color: #f5f5f5;
}
</style>- 配置全局 SCSS 變量（可選但推薦）
在 uni.scss 文件中引入 uView 的全局變量，方便自定義主題：
/* 引入 uView Plus 全局變量 */ @import "uview-plus/theme.scss";
- Vite 配置（如果是 Vite 項(xiàng)目）
如果你的項(xiàng)目是 Vue3 + Vite 架構(gòu)，需要在 vite.config.js 中添加別名配置，避免路徑報錯：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import path from 'path'
export default defineConfig({
plugins: [uni()],
resolve: {
alias: {
// 配置 uView Plus 路徑別名
'uview-plus': path.resolve(__dirname, 'node_modules/uview-plus')
}
}
})四、使用 uView 組件
配置完成后，就可以在任意頁面 / 組件中直接使用 uView 的組件，無需額外注冊。
示例：使用按鈕和表單組件
<template>
<view class="container">
<!-- uView 按鈕組件 -->
<u-button type="primary" @click="handleClick">主要按鈕</u-button>
<u-button type="warning" size="mini">小型警告按鈕</u-button>
<!-- uView 輸入框組件 -->
<u-input
v-model="inputValue"
placeholder="請輸入內(nèi)容"
border="surround"
clearable
></u-input>
<!-- uView 彈窗組件 -->
<u-modal
v-model="showModal"
title="提示"
content="這是 uView 的彈窗組件"
confirm-text="確定"
cancel-text="取消"
></u-modal>
</view>
</template>
<script setup>
import { ref } from 'vue'
// 響應(yīng)式數(shù)據(jù)
const inputValue = ref('')
const showModal = ref(false)
// 按鈕點(diǎn)擊事件
const handleClick = () => {
showModal.value = true
}
</script>
<style scoped>
.container {
padding: 20rpx;
}
</style>五、自定義主題（可選）
uView 支持通過覆蓋 SCSS 變量來修改主題，例如修改主色調(diào)：
在 uni.scss 中添加：
/* 覆蓋 uView 主色調(diào) */ $u-primary: #007aff; /* 覆蓋警告色 */ $u-warning: #ff9500; /* 覆蓋邊框顏色 */ $u-border-color: #e5e5e5;
六、常見問題解決
1.樣式不生效：
檢查 App.vue 中的 < style > 是否添加了 lang=“scss”；
確保已安裝 sass 和 sass-loader：npm install sass sass-loader@10 -D。
2.組件找不到：
檢查 main.js 中是否正確注冊 app.use(uviewPlus)；
Vite 項(xiàng)目需確認(rèn) vite.config.js 中的別名配置是否正確。
3.Vue3 + TS 報錯：
安裝 @types/uview-plus，并在 tsconfig.json 中添加類型引入：
{
"types": ["uview-plus"]
}總結(jié)
1.Vue3 中使用 uView 需安裝 uView Plus（uView 2.x），而非 uView 1.x（僅支持 Vue2）；
2.核心步驟：npm 安裝 → main.js 全局注冊 → App.vue 引入樣式 → 直接使用組件；
3.注意 Vite 項(xiàng)目需配置路徑別名，SCSS 環(huán)境需安裝對應(yīng)的依賴包。
通過以上步驟，你就能在 Vue3 版的 uni-app 項(xiàng)目中無縫使用 uView 的所有組件，快速搭建移動端界面。如果需要使用某個具體組件，可以參考 uView Plus 官方文檔 查看詳細(xì)屬性和用法。
vue3使用uv-ui
uv-ui 是專門適配 uni-app + Vue3 的輕量級移動端 UI 組件庫（可看作 uView 的 Vue3 替代方案），相比 uView Plus 更輕量化、適配性更好。下面我會帶你完成 Vue3 + uni-app 中 uv-ui 的完整集成和使用流程，步驟清晰且可直接落地。
一、環(huán)境要求
uni-app 項(xiàng)目（Vue3 + Vite / Vue3 + Webpack）
Node.js ≥ 14.0.0
已安裝 sass（uv-ui 基于 SCSS 開發(fā)）
二、安裝 uv-ui
方式 1：npm 安裝（推薦）
在項(xiàng)目根目錄執(zhí)行命令：
# 安裝 uv-ui 核心包 npm install uv-ui # 安裝 SCSS 依賴（若未安裝） npm install sass sass-loader@10 -D
方式 2：手動安裝
從 uv-ui 官網(wǎng) 下載源碼，將 uv-ui 文件夾復(fù)制到項(xiàng)目 components 目錄下。
三、全局配置（關(guān)鍵步驟）
- 全局注冊組件（main.js/main.ts）
在項(xiàng)目入口文件中注冊 uv-ui，支持完整引入或按需引入（推薦按需引入減小體積）。
方式 A：完整引入（簡單快捷）
import { createSSRApp } from 'vue'
import App from './App.vue'
// 引入 uv-ui 核心庫
import uvUi from 'uv-ui'
// 引入 uv-ui 全局樣式
import 'uv-ui/style/index.scss'
export function createApp() {
const app = createSSRApp(App)
// 全局注冊 uv-ui
app.use(uvUi)
return {
app
}
}方式 B：按需引入（推薦，減小打包體積）
import { createSSRApp } from 'vue'
import App from './App.vue'
// 只引入需要的組件（示例：按鈕、輸入框）
import { uvButton, uvInput } from 'uv-ui'
// 引入對應(yīng)組件樣式
import 'uv-ui/style/uv-button.scss'
import 'uv-ui/style/uv-input.scss'
export function createApp() {
const app = createSSRApp(App)
// 注冊單個組件
app.component('uv-button', uvButton)
app.component('uv-input', uvInput)
return {
app
}
}- 配置全局樣式（App.vue）
在 App.vue 的 < style > 標(biāo)簽中引入 uv-ui 全局樣式（若用完整引入，此步驟可省略，已在 main.js 引入）：
<style lang="scss">
/* 若按需引入，需手動引入基礎(chǔ)樣式 */
@import "uv-ui/style/base.scss";
/* 自定義全局樣式 */
page {
background-color: #f8f8f8;
font-size: 28rpx;
}
</style>`在這里插入代碼片`- Vite 路徑配置（Vite 項(xiàng)目必加）
如果是 Vue3 + Vite 架構(gòu)，需在 vite.config.js 中配置別名，避免路徑報錯：
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import path from 'path'
export default defineConfig({
plugins: [uni()],
resolve: {
alias: {
// 配置 uv-ui 路徑別名
'uv-ui': path.resolve(__dirname, 'node_modules/uv-ui')
}
}
})四、使用 uv-ui 組件（示例）
配置完成后，可在任意頁面 / 組件中直接使用 uv-ui 組件，以下是常用組件的使用示例
<template>
<view class="container">
<!-- 1. 按鈕組件 -->
<uv-button
type="primary"
size="normal"
@click="openToast"
icon="search"
>
主要按鈕
</uv-button>
<uv-button type="danger" plain>鏤空危險按鈕</uv-button>
<!-- 2. 輸入框組件 -->
<uv-input
v-model="inputValue"
placeholder="請輸入內(nèi)容"
clearable
border="bottom"
@change="handleInputChange"
></uv-input>
<!-- 3. 提示框組件 -->
<uv-toast ref="toastRef" />
<!-- 4. 彈窗組件 -->
<uv-popup
v-model="showPopup"
position="center"
title="提示"
>
<view class="popup-content">
<text>這是 uv-ui 的彈窗內(nèi)容</text>
<uv-button type="primary" @click="showPopup = false">確定</uv-button>
</view>
</uv-popup>
</view>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
// 響應(yīng)式數(shù)據(jù)
const inputValue = ref('')
const showPopup = ref(false)
// 獲取 toast 實(shí)例
const toastRef = ref(null)
const { proxy } = getCurrentInstance()
// 按鈕點(diǎn)擊：顯示提示框
const openToast = () => {
proxy.$uv.toast({
title: '操作成功',
type: 'success',
duration: 2000
})
// 也可通過 ref 調(diào)用
// toastRef.value.show({ title: '操作成功' })
}
// 輸入框變化事件
const handleInputChange = (val) => {
console.log('輸入內(nèi)容：', val)
}
</script>
<style scoped lang="scss">
.container {
padding: 20rpx;
gap: 20rpx;
display: flex;
flex-direction: column;
}
.popup-content {
padding: 30rpx;
text-align: center;
gap: 20rpx;
display: flex;
flex-direction: column;
}
</style>五、自定義主題（可選）
uv-ui 支持通過覆蓋 SCSS 變量修改主題，步驟如下：
1.在項(xiàng)目根目錄創(chuàng)建 styles/uv-variables.scss 文件；
2.寫入需要覆蓋的變量（參考 uv-ui 官方默認(rèn)變量）：
// 覆蓋主色調(diào) $uv-primary-color: #007aff; // 覆蓋危險色 $uv-danger-color: #ff3b30; // 覆蓋邊框顏色 $uv-border-color: #e5e5e5; // 覆蓋字體主色 $uv-text-color: #333333;
3.在 App.vue 中先引入自定義變量，再引入 uv-ui 樣式：
<style lang="scss"> @import "./styles/uv-variables.scss"; @import "uv-ui/style/index.scss"; // 完整引入時用 // @import "uv-ui/style/base.scss"; // 按需引入時用 </style>
六、常見問題解決
1.樣式失效 / 組件不顯示：
檢查是否安裝 sass 依賴（npm install sass sass-loader@10 -D）；
確認(rèn) < style > 標(biāo)簽添加了 lang=“scss”；
Vite 項(xiàng)目需檢查別名配置是否正確。
- u v 全局方法未定義：確保在 m a i n . j s 中執(zhí)行了 a p p . u s e ( u v U i ) ；按需引入時需單獨(dú)注冊全局方法： i m p o r t u v T o a s t f r o m ′ u v − u i ′ ; a p p . c o n f i g . g l o b a l P r o p e r t i e s . uv 全局方法未定義： 確保在 main.js 中執(zhí)行了 app.use(uvUi)； 按需引入時需單獨(dú)注冊全局方法：import { uvToast } from 'uv-ui'; app.config.globalProperties. uv全局方法未定義：確保在main.js中執(zhí)行了app.use(uvUi)；按需引入時需單獨(dú)注冊全局方法：importuvToastfrom′uv−ui′;app.config.globalProperties.uv = { toast: uvToast }。
3.Vue3 + TS 類型報錯：
在 src 目錄下創(chuàng)建 shims-uv-ui.d.ts：
declare module 'uv-ui' {
const uvUi: any;
export default uvUi;
export const uvButton: any;
export const uvInput: any;
}
總結(jié)
uv-ui 是 Vue3 + uni-app 輕量化 UI 庫，安裝后需在 main.js 全局注冊（支持完整 / 按需引入）；
Vite 項(xiàng)目必須配置路徑別名，且需確保 SCSS 環(huán)境依賴安裝完成；
使用時可直接調(diào)用組件，全局方法（如 $uv.toast）需確保全局注冊成功，支持自定義主題覆蓋變量。
如果需要使用具體組件（如表單、列表、導(dǎo)航欄等），可參考 uv-ui 官方文檔 查看詳細(xì)屬性和用法。
到此這篇關(guān)于vue3使用uView與uv-ui的詳細(xì)步驟的文章就介紹到這了,更多相關(guān)vue 使用uView與uv-ui內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue偵聽器:watch與watchEffect的區(qū)別與使用
watch 和 watchEffect 都是 Vue 中用于偵聽響應(yīng)式數(shù)據(jù)變化的工具,但它們的依賴追蹤方式、執(zhí)行時機(jī)和使用場景有顯著區(qū)別, 下面就來詳細(xì)的介紹一下,感興趣的可以了解一下2026-02-02
本篇文章主要介紹了淺談vue路徑優(yōu)化之resolve，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue項(xiàng)目不能使用localhost訪問的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪問的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Element?Plus組件Form表單Table表格二次封裝的完整過程
一般在后臺管理系統(tǒng)的開發(fā)中,都會遇到很多table,但每一次都去引入el-table就會導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue.draggable實(shí)現(xiàn)表格拖拽排序效果
這篇文章主要為大家詳細(xì)介紹了vue.draggable實(shí)現(xiàn)表格拖拽排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決方案
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參后無法清空地址欄參數(shù)問題解決方案,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-05-05
ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)
這篇文章主要介紹了ElementUI Tree 樹形控件的使用并給節(jié)點(diǎn)添加圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個Vue項(xiàng)目的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05