一、前言：選擇 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 后重新安裝依賴

---