uview-vue3
v1.0.6
Published
uView UI 的 Vue3 版本,适用于 uni-app Vue3(H5 / 微信小程序)
Maintainers
Readme
基于 uView 2.0.38 迁移,组件名、样式与交互尽量保持一致。遵循 MIT 协议。当前版本 1.0.6。
适用环境
- uni-app Vue3(Vite)
- 当前保证平台:H5、微信小程序
- 不保证 nvue、App、其他小程序端(源码里的
#ifdef APP-NVUE仍保留)
安装
npm install uview-vue31. 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 所有。
