uview-vue3

uview-vue3

uView 2.0 的 Vue3 版本，适用于 uni-app（H5 / 微信小程序）

基于 uView 2.0.38 迁移，组件名、样式与交互尽量保持一致。遵循 MIT 协议。当前版本 1.0.6。

适用环境

• uni-app Vue3（Vite）
• 当前保证平台：H5、微信小程序
• 不保证 nvue、App、其他小程序端（源码里的 #ifdef APP-NVUE 仍保留）

安装

npm install uview-vue3

1. main.js

app.use(uview) 不会把样式打进页面，必须再写一行 CSS 引入。不要在 App.vue 里写 Sass @import（会触发弃用警告，微信端也不稳定）。

import { createSSRApp } from 'vue'
import App from './App.vue'
import uview from 'uview-vue3'
import 'uview-vue3/index.scss'

export function createApp() {
	const app = createSSRApp(App)
	app.use(uview)
	return {
		app
	}
}

2. uni.scss（必须写在文件最顶部）

@use 'uview-vue3/theme.scss' as *;

3. pages.json easycom

{
	"easycom": {
		"autoscan": true,
		"custom": {
			"^u-(.*)": "uview-vue3/components/u-$1/u-$1.vue"
		}
	}
}

Vite 5.2 若出现 Sass legacy-js-api 弃用警告，可在项目 vite.config.js 里加 css.preprocessorOptions.scss.silenceDeprecations: ['legacy-js-api']。升到 Vite 5.4+ 后可改用 api: 'modern-compiler' 再去掉。这与 UI 库无关。

使用

配置 easycom 后，直接写组件即可：

<template>
	<u-button text="按钮"></u-button>
	<u-input v-model="keyword" placeholder="请输入"></u-input>
</template>

模板和 JS 中继续使用 uni.$u.xxx / this.$u.xxx。

与 uView 2 的差异

• v-model 仅支持 Vue3 的 modelValue，不再认 Vue2 的 value + input。写法仍是 v-model="xxx"；手动绑定请写 :modelValue + @update:modelValue。展示型 value 没改，例如 u-badge、u-cell、u-collapse-item 右侧文字仍是 value。
• 不再提供 Vue filter。时间格式化请用 uni.$u.timeFormat(ts) 或 this.$u.timeFormat(ts)，不要写 {{ ts | timeFormat }}。
• 生命周期已改为 beforeUnmount / unmounted；$set、$children 已按 Vue3 改写（getChildren 会先尝试 $children，再走 vnode 树）。
• 插槽判断走 mixin hasSlot（微信端兼容 default 与 $default）。

使用注意

• 小程序自定义组件有样式隔离。依赖「多个 text 上下排」的布局，组件内部要自己写 flex-direction: column（如 u-cell 的标题和描述），不要指望全局 view 重置。
• 组件 <style> 不能留空，否则微信编译不生成 .wxss，开发者工具会报 ENOENT。
• 微信端请用 uni.getWindowInfo / uni.getDeviceInfo / uni.getAppBaseInfo；库内 uni.$u.sys()、uni.$u.os() 已按新接口缓存，不必再调 getSystemInfoSync。
• u-parse 图文、视频、懒加载；checkbox / radio / tabbar / collapse / form 的父子联动；u-input / u-textarea 前后缀插槽，建议在微信里对照原版看一眼。
• 弹层打开后会递归调子组件 init()。若微信内部 vnode 与 H5 不同，日历、吸顶、进度条等可能初次尺寸不准。

原版遗留（未改逻辑）

• u-dropdown-item 源码组件名是 u-dropdown，和目录名不一致。
• uview-ui/uview-ui.vue 是空壳组件。
• u-slider/nvue - 副本.js 是原版遗留文件。

版权

源码基于 uView（MIT）。uView 版权归 www.uviewui.com 所有。

https://www.npmjs.com/package/uview-vue3