前言：

? ? ? ? 就像我們vue的web的框架element、iview等一樣，我們的uni-app開發也有適合的他的框架，除了他本身的擴展組件以外，第三方好用的就是就是uview了。

實現效果：

官網信息：

vue2版本：uview-ui

Image 圖片 | uView 2.0 - 全面兼容 nvue 的 uni-app 生態框架 - uni-app UI 框架uView UI，是 uni-app 生態最優秀的 UI 框架，全面的組件和便捷的工具會讓您信手拈來，如魚得水https://uviewui.com/components/image.html

vue3版本：uview-plus

安裝unocss | uview-plus - 全面兼容nvue/鴻蒙/uni-app-x的uni-app生態框架 - uni-app UI框架uview-plus，是uni-app生態最優秀的UI框架，全面的組件和便捷的工具會讓您信手拈來，如魚得水https://uiadmin.net/uview-plus/components/unocss.html

具體使用：

vue2：

1、安裝

npm install uview-ui@2.0.38

2、main.js中配置

// main.js，注意要在use方法之后執行
import uView from 'uview-ui'
Vue.use(uView)// 如此配置即可
uni.$u.config.unit = 'rpx'// 調用setConfig方法，方法內部會進行對象屬性深度合并，可以放心嵌套配置
// 需要在Vue.use(uView)之后執行
uni.$u.setConfig({// 修改$u.config對象的屬性config: {// 修改默認單位為rpx，相當于執行 uni.$u.config.unit = 'rpx'unit: 'rpx'},// 修改$u.props對象的屬性props: {// 修改radio組件的size參數的默認值，相當于執行 uni.$u.props.radio.size = 30radio: {size: 15}// 其他組件屬性配置// ......}
})

3、具體使用，帶個u就可以了

<template><view><u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet><u-button @click="show = true">打開ActionSheet</u-button></view>
</template><script>
export default {data() {return {title:'標題',list: [{name:'選項一',subname:"選項一描述",color:'#ffaa7f',fontSize:'20'},{name: '選項二禁用',disabled:true},{name: '開啟load加載', //開啟后文字不顯示loading:true}],show: false};}
};
</script>

vue3：

1、安裝，

注意，這里對sass有很嚴格的版本要求

npm install uview-plus

sass版本要求

"sass": "1.63.2",
"sass-loader": "10.4.1",

sass安裝命令
# 注意：sass-loader 版本需兼容，推薦使用 v10.x

npm install sass sass-loader@10 --save-dev

2、在?main.js?或?main.ts?中配置

import { createSSRApp } from 'vue'import uviewPlus from 'uview-plus' //uni-app創建的vue3項目的話，加這兩句export function createApp() {const app = createSSRApp(App)app.use(uviewPlus) //uni-app創建的vue3項目的話，加這兩句return { app }
}

3、App.vue中的style樣式中添加

<style lang="scss">@import "uview-plus/index.scss"; //添加這個
</style>

4、uni.scss 文件中添加

@import "uview-plus/theme.scss";

5、?配置 easycom 自動引入組件，這個很重要

注意：

????????因為我們如果之前用過vue2+uview開發會發現，我們的標簽都是 u-? 的標簽，但是我們uview-plus 都是? up- 開頭的標簽，這里添加是為了讓二者指向一直，解決我們部分標簽查找不對的問題，比如：我們使用button/popup等標簽，他就是指向u-button內容，所以要把兩個指向都更改到我們新安裝的包

"easycom": {"autoscan": true,"custom": {// uni-ui 規則如下配置"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"}}

6、（非必須）如果需要ts支持，新建一個?tsconfig.json文件，添加下面內容就行了

在?tsconfig.json?中添加類型聲明：

{"compilerOptions": {"types": ["uview-plus/global"]}
}

7、使用

如果你也想不用手動引入ref等信息，請點我

<template><up-box height="160px" gap="12px" :bgColors="['#EEFCFF', '#FCF8FF', '#FDF8F2']"><template #left>左</template><template #rightTop>右上</template><template #rightBottom>右下</template></up-box><view><up-select v-model="cateId" label="分類":options="cateList" @select="selectItem"></up-select></view><view><up-calendar :show="show"></up-calendar><up-button @click="show = !show">打開/關閉</up-button></view>
</template><script setup>
//這里根據你的配置來，如果沒有自動導入的，就手動加上ref的引入
let show = ref(false)
const cateId = ref('')
const cateList = ref([{id: '1',name: '分類1'},{id: '2',name: '分類2'},{id: '3',name: '分類4'},
])// 方法  
const selectItem = (item) => {  console.log(item);  
};  
</script><style></style>