uniapp中引入使用uViewUI

文章目录 一、前言：选择 uView UI的原因二、完整引入步骤1. 安装 uView UI2. 配置全局样式变量（关键！）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 后重新安装依赖

---