当前位置：首页 > news >正文

uniapp+vue3+uview来开发我们的项目

news 来源：原创 2025/5/14 6:21:59

前言：

就像我们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>