点点阅读app正版
24.91MB · 2025-10-31
推荐阅读：
# uView Pro 正式开源！70+ Vue3 组件重构完成，uni-app 组件库新晋之星
# uView Pro 全新升级来啦！一行配置，解锁 VSCode 全局 TS 类型提示与校验
# 2025 最推荐的 uni-app 技术栈：unibest + uView Pro 高效开发全攻略
# 近期 Star 飙升！uView Pro 文档也开源啦：完全免费、无广告、高效上手
uView Pro 是基于 uni-app + Vue3 + TypeScript 全面重构的高质量组件库，内置 70+ 常用 UI 组件，支持多端适配、主题定制、TS 类型提示、Volar 智能补全等特性。其开源、活跃、文档完善，目前已逐步成为 uni-app 生态主流选择之一了。
快速集成步骤：
uView Pro 支持 npm 和 uni_modules 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 easycom 实现组件自动引入，极大提升开发效率。
以下为统一的配置说明：
npm install uview-pro
# 或
yarn add uview-pro
# 或
pnpm add uview-pro
通过 HBuilderX 插件市场或手动下载，将 uView Pro 放入 uni_modules 目录。
插件市场：https://ext.*dcl*oud*.net.cn/plugin?id=24633
在 main.ts 中引入并注册 uView Pro：
import { createSSRApp } from 'vue';
// npm 方式
import uViewPro from 'uview-pro';
// uni_modules 方式
// import uViewPro from "@/uni_modules/uview-pro";
export function createApp() {
const app = createSSRApp(App);
app.use(uViewPro);
return {
app
};
}
在 uni.scss 中引入主题样式：
/* npm 方式 */
@import 'uview-pro/theme.scss';
/* uni_modules 方式 */
/* @import "@/uni_modules/uview-pro/theme.scss"; */
在 App.vue 首行引入基础样式：
<style lang="scss">
/* npm 方式 */
@import "uview-pro/index.scss";
/* uni_modules 方式 */
/* @import "@/uni_modules/uview-pro/index.scss"; */
</style>
在 pages.json 中配置 easycom 规则，实现组件自动引入：
{
"easycom": {
"autoscan": true,
"custom": {
// npm 方式
"^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
// uni_modules 方式
// "^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
}
},
"pages": []
}
温馨提示
easycom 规则后需重启 HBuilderX 或重新编译项目。pages.json 中只有一个 easycom 字段，否则请自行合并多个规则。custom 内，否则无效。如需在 CLI 项目中获得 Volar 的全局类型提示，请在 tsconfig.json 中添加：
{
"compilerOptions": {
// npm 方式
"types": ["uview-pro/types"]
// uni_modules 方式
// "types": ["@/uni_modules/uview-pro/types"]
}
}
配置完成后，无需 import 和 components 注册，可直接在 SFC 中使用 uView Pro 组件：
<template>
<u-button type="primary">按钮</u-button>
</template>
请通过快速上手了解更详细的内容！
以下总结梳理了使用 uView Pro 组件库开发 uni-app 应用时的常见问题、解决方案及最佳实践，帮助大家高效避坑、提升项目质量。
原因分析：
解决方案：
// pages.json
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "@/uni_modules/uview-pro/components/u-$1/u-$1.vue"
}
main.ts 已全局引入 uView Prouview-pro/theme.scss 是否全局引入，检查uview-pro/index.scss 是否引入原因分析：
解决方案：
最佳实践：
原因分析：
解决方案：
{
"compilerOptions": {
"types": ["uview-pro/types"]
}
}
效果示例：
原因分析：
解决方案：
最佳实践：
<script setup lang="ts"> 书写，享受最完整类型推断问题表现：
解决方案：
import { deepClone } from "uview-pro";
const copy = deepClone(obj); // 类型自动推断
最佳实践：
问题表现：
解决方案：
原因分析：
解决方案：
问题表现：
解决方案：
问题表现：
原因分析：
解决方案：
最佳实践：
问题表现：
原因分析：
解决方案：
推荐统一并锁定依赖版本：
"sass": "1.63.2",
"sass-loader": "10.4.1"
如遇到语法报错，优先检查 loader 版本与官方文档
团队协作时，建议在 package.json 中锁定依赖，避免自动升级
删除 node_modules 并重新安装依赖，确保环境一致
最佳实践：
uView Pro 作为 uni-app 生态的新星组件库，凭借完善的 TS 类型支持、丰富的组件体系和活跃的社区生态，极大提升了多端开发效率。只要遵循本文最佳实践与排查清单，大部分常见问题都能高效解决。
官方资源：
如有更多问题，欢迎在官方 issue 区留言或加入交流群反馈！
