文章目录
- 一、前言：选择 uView UI的原因
- 二、完整引入步骤
- 1. 安装 uView UI
- 2. 配置全局样式变量（关键！）
- 3. 在 pages.json中添加：
- 4. 全局注册组件
- 5. 直接使用组件
- 五、自定义主题色（秒换皮肤）
一、前言：选择 uView UI的原因
uView UI 是 uni-app 生态中高颜值、高拓展性、开发体验友好的组件库，提供 100+ 组件和丰富工具，能极大提升开发效率。
二、完整引入步骤
1. 安装 uView UI
在项目根目录执行命令（确保已安装 Node.js）：
npm install uview-ui
验证安装成功：
查看项目根目录是否生成 uview-ui 文件夹，结构如下：
uview-ui/├── components/ # 所有组件源码├── libs/ # 工具库（如请求封装）├── theme.scss # 核心样式变量文件└── index.scss # 全量样式文件（慎用！）
2. 配置全局样式变量（关键！）
在 uni.scss 文件中引入主题文件（支持自定义主题色、间距等）：
/** uni.scss */
@import '@/uview-ui/theme.scss'; // 核心样式依赖此文件
为什么必须做这一步？
- uView 的组件样式依赖
theme.scss中的变量定义 - 后续自定义主题色、字体大小等都通过修改此文件实现
3. 在 pages.json中添加：
{"easycom": {"autoscan": true,"custom": {"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"}}
}
4. 全局注册组件
在 main.js 中添加以下代码：
// main.js
import uView from 'uview-ui';
Vue.use(uView); // 全局注册所有组件
5. 直接使用组件
在任意页面中无需导入，直接使用：
<template><view class="container"><u-button type="primary" text="提交"></u-button><u-icon name="home" size="24"></u-icon></view>
</template>
<!-- 无需 script 导入！ -->
五、自定义主题色（秒换皮肤）
在 uni.scss 中覆盖默认变量：
/** uni.scss自定义主题色（必须放在引入 theme.scss 之前！） **/
$u-primary: #FF0000; // 主题红
$u-warning: #FF9900; // 警告橙@import '@/uview-ui/theme.scss';
修改后重启项目即可生效！
组件未找到？
- 检查1：确认
uview-ui文件夹在项目根目录 - 检查2：若使用
easycom，路径必须为@/uview-ui/... - 检查3：删除
node_modules后重新安装依赖
)
