uni-app如何使用uView UI组件库-uni-app-PHP中文网

uview必须通过uni_modules机制安装并配置，不能仅用npm install；需放入uni_modules目录、正确配置easycom、按vue2/vue3差异注册、精准导入scss文件，缺一不可。

直接装完 npm install uview-ui 就写 <u-button></u-button>，90% 会白屏或报 unknown custom element。uview 不是普通 npm 包，它必须走 uni-app 的 uni_modules 插件机制 + 四处硬性配置，缺一不可。

uView 必须放进 `uni_modules` 目录，不能只靠 `node_modules`

官方 npm 包（uview-ui 或 uview-plus）只是源码分发载体，uni-app 运行时只认 uni_modules/uview-ui 这个固定路径下的文件结构。

手动下载 ZIP 或用 HBuilderX 插件市场安装，解压/导入后，项目根目录下必须出现 uni_modules/uview-ui/（Vue2）或 uni_modules/uview-plus/（Vue3），文件夹名一个字母都不能错
用 npm install uview-ui 装出来的内容在 node_modules 里，uni-app 默认不扫描那里——除非你额外配 vue.config.js 的 transpileDependencies: ['uview-ui']，但小程序端仍大概率样式丢失
装完必须重启 HBuilderX 或重新运行 npm run dev:mp-weixin，否则 uni_modules 不会被重新扫描注册

`main.js` 或 `main.ts` 中注册方式严格区分 Vue2/Vue3

写错一行，控制台就报 Cannot read property 'use' of undefined 或组件内部逻辑失效。

Vue2 项目（uni-app 2.x）：main.js 里写 import uView from '@/uni_modules/uview-ui'; Vue.use(uView);，且必须在 new Vue() 之前
Vue3 项目（uni-app 3.x + Vite）：main.ts 里必须用 createSSRApp().use()，且 app.use(uViewPlus) 要放在所有其他插件（如 pinia、i18n）之前
别在 App.vue 的 onLaunch 里注册——那时页面组件早已开始解析，插件挂载太晚
TypeScript 项目记得在 shims-vue.d.ts 加 declare module 'uview-ui'，否则 uni.$u 等类型全丢

`pages.json` 的 `easycom` 配置路径必须精确匹配

漏配或斜杠方向写反，<u-button></u-button> 标签语法完全正确，渲染出来就是空白，控制台还无报错。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

Vue2 / uView 2.x：在 pages.json 顶层对象加

"easycom": {
  "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
}

Vue3 / uView Plus：对应改成

"easycom": {
  "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
}

Windows 用户注意：路径里必须用正斜杠 /，复制粘贴时容易带入反斜杠 \，导致正则匹配失败
验证方法：临时删掉整个 easycom 块，重启开发服务器，<u-button></u-button> 立刻白屏——说明原配置确实在起作用

三处 SCSS 导入顺序和位置不能乱

样式错乱、主题色不生效、图标显示为方块，八成是这三处没对齐。

App.vue 的 <style lang="scss"></style> 标签内第一行，必须是 @import "@/uni_modules/uview-ui/index.scss";（Vue2）或 @import "uview-plus/index.scss";（Vue3）
uni.scss 文件里，必须有 @import "@/uni_modules/uview-ui/theme.scss";（Vue2）或 @import "uview-plus/theme.scss";（Vue3）
两处都必须加 lang="scss"，且 App.vue 的引入必须在最顶部——任何 CSS 或注释在它前面都会导致编译失败
Vue3 项目若用 Vite，还得在 vite.config.js 的 optimizeDeps.include 里加上 'uview-plus'，否则 HMR 时样式热更新失效