uniapp 中引入使用uView UI

一、前言：选择 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';

修改后重启项目即可生效！

扫描二维码关注公众号，回复： 17592224 查看本文章

---

组件未找到？

• 检查1：确认 uview-ui 文件夹在项目根目录
• 检查2：若使用 easycom，路径必须为 @/uview-ui/...
• 检查3：删除 node_modules 后重新安装依赖

---