npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

uview-vue3

v1.0.6

Published

uView UI 的 Vue3 版本,适用于 uni-app Vue3(H5 / 微信小程序)

Readme

基于 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-badgeu-cellu-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