uniapp中vue3 ，uview-plus使用!

米粒宝的爸爸2025-06-15 22:11

使用过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"
			}
		},

8.安装依赖库

复制代码

npm i dayjs
npm i clipboard

9.测试

在组件库中随便加一个组件，然后运行项目，测试是否运行成功！