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

uniapp中vue3 ，uview-plus使用!

news 来源：原创 2025/6/14 8:11:18

使用过uniapp的，大家应该都对uview不陌生。

原来vue2的版本中，uview解决了我大部分的麻烦事。奈何现在要用vue3，你还不支持。

记录一下uview-plus的使用之路吧。

uview-plus的地址

零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙移动组件库。 - DCloud 插件市场

uview2的地址

uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

开始使用

1.uni建v3的项目

2.导入插件

3.配置main.js

// main.js，这里！！！！！！！！！！
import uviewPlus from '@/uni_modules/uview-plus'// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)//这里！！！！！！！！app.use(uviewPlus)return {app}
}
// #endif

4.配置uni.scss

加入这句话，放在第一行

@import '@/uni_modules/uview-plus/theme.scss';

5.配置App.vue

<style lang="scss">/*加这句话，放第一行*/@import "@/uni_modules/uview-plus/index.scss";
</style>

6.配置manifest

关键代码"mergeVirtualHostAttributes" : true

"mp-weixin" : {"appid" : "",..."mergeVirtualHostAttributes" : true
},
"mp-toutiao" : {"appid" : "",..."mergeVirtualHostAttributes" : true
}

7.pages.json中添加代码来配置easycom组件模式

加上这个，记得关了编辑器。重新在打开，才起效果！

"easycom": {"autoscan": true,// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175"custom": {"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"}},