快速上手

当前版本：v1.0.0

MuzhiyuUI 是一套基于 UniApp + Vue 3 + SCSS 打造的全端 UI 组件库，包含 89+ 生产级组件、uni.$mu 全局工具箱 与 全端原生适配。

---

📦 安装

方式 A：npm 安装（推荐）

npm install muzhiyu-ui

方式 B：uni_modules 安装

从 DCloud 插件市场一键导入至项目 uni_modules/muzhiyu-ui 目录。

---

🔧 配置 easycom 按需解析

在项目根目录 pages.json 中添加以下 easycom 规则，配置后无需手动 import，模板中直接使用 <mu-button> 等标签即可：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^mu-(.*)": "@/uni_modules/muzhiyu-ui/components/mu-$1/mu-$1.vue"
    }
  }
}

---

🚨 微信小程序“已被代码依赖分析忽略”解决方案

如果在微信开发者工具运行或编译时报如下错误：

[Error] uni_modules/muzhiyu-ui/components/mu-button/mu-button.js 已被代码依赖分析忽略，无法被其他模块引用。

这是由于微信开发者工具的 “按需注入和代码依赖分析” 校验过严导致的。请通过以下两种方案解决：

解决办法 1：微信开发者工具关闭按需依赖分析（推荐、最快捷）

在微信开发者工具主界面：

1. 点击右上角 【详情】 按钮；
2. 切换到 【本地设置】 标签页；
3. 取消勾选 【按需注入和代码依赖分析】（或 【过滤无依赖文件】）；
4. 重新编译项目即可恢复正常运行！

解决办法 2：确保 pages.json 指向 uni_modules 正确路径

检查 pages.json 中的 easycom.custom 规则，确保指向为： "^mu-(.*)": "@/uni_modules/muzhiyu-ui/components/mu-$1/mu-$1.vue"，避免本地 components 目录与 uni_modules 产生双重匹配冲突。

---

🚀 挂载全局工具箱

在 main.js 中注册插件，一行代码挂载 uni.$mu 全局命名空间：

import { createSSRApp } from 'vue'
import App from './App'
import mu from '@/uni_modules/muzhiyu-ui' // 或 'muzhiyu-ui'

export function createApp() {
  const app = createSSRApp(App)
  app.use(mu) // 挂载后自动注入 uni.$mu 全局对象
  return { app }
}

挂载完成后，在任何页面、<script setup>、Pinia Store 或 request.js 中均可零 import 直接调用：

// Toast 弹窗
uni.$mu.toast('保存成功', 'success')

// 顶部通知
uni.$mu.notify({ message: '订单已确认', type: 'success' })

// 全屏加载
uni.$mu.loadingPage('数据加载中...')
uni.$mu.loadingPage.hide()

// 网络请求
uni.$mu.http.get('/api/user/info', { id: 1001 })

// 工具函数
uni.$mu.util.maskPhone('13812345678')      // "138****5678"
uni.$mu.validate.isEmail('test@qq.com')    // true
uni.$mu.format.formatMoney(1234567.89)     // "1,234,567.89"

---

🎨 引入全局样式

在项目根目录 uni.scss 中引入组件库的 SCSS 变量（可选，用于自定义主题色）：

@import '@/uni_modules/muzhiyu-ui/theme.scss';

---

✅ 开始使用

在页面中直接编写组件标签，无需任何 import：

<template>
  <view class="page">
    <mu-button type="primary" @click="handleClick">确认提交</mu-button>
    <mu-button type="danger" plain>删除记录</mu-button>
    <mu-button type="success" round loading>正在保存...</mu-button>
  </view>
</template>

<script setup>
function handleClick() {
  uni.$mu.toast('提交成功', 'success')
}
</script>

---

📱 平台兼容性

平台	兼容状态
微信小程序	✅ 全量适配
H5	✅ 全量适配
App (iOS/Android)	✅ 全量适配
支付宝小程序	✅ 基础适配
抖音小程序	✅ 基础适配
QQ 小程序	✅ 基础适配