重新安装wot-ui-组件库

第一步 安装依赖

pnpm add @wot-ui/ui

同时确保 sass 版本符合要求（>=1.78，推荐 1.98+）：

pnpm add -D sass@^1.98.0

第二步配置 easycom 自动引入

修改 pages.config.ts，在 easycom.custom 中加入 Wot UI 的规则：

export default defineUniPages({
  // ... 其他配置
  easycom: {
    autoscan: true,
    custom: {
      // Wot UI 组件自动引入
      "^wd-(.*)": "@wot-ui/ui/components/wd-$1/wd-$1.vue",
      // 保留你已有的规则
      "^fg-(.*)": "@/components/fg-$1/fg-$1.vue",
      "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)":
        "z-paging/components/z-paging$1/z-paging$1.vue",
    },
  },
  // ...
});

第三步 Volar / TypeScript 类型支持（可选但推荐）

为了在 <wd-button> 等组件上有类型提示，在 tsconfig.json 的 compilerOptions.types 数组中加入：

"types": [
  // ... 已有类型
  "@wot-ui/ui/global"
]

第四步 处理Sass编译警告

由于 uni-app 内部还在使用旧版 Sass API，启动时可能会出现 legacy-js-api 警告。在 vite.config.ts 中添加：

export default defineConfig({
  // ... 其他配置
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
        silenceDeprecations: ["legacy-js-api"],
      },
    },
  },
});

第五步 排除预构建缓存（避免国际化等问题）

在 vite.config.ts 中增加：

export default defineConfig({
  // ... 其他配置
  optimizeDeps: {
    exclude: ["@wot-ui/ui"],
  },
});

第六步 引入 Wot UI 基础样式

• 在 src/App.vue 的 <style> 标签中添加：

<style lang="scss">
/* 引入 Wot UI 主题变量和基础样式 */
@use '@wot-ui/ui/styles/theme/index.scss' as *;
</style>

第七步 使用组件

配置完成后，直接在 .vue 文件中使用即可，无需手动 import：

<template>
  <view>
    <wd-button type="primary">主要按钮</wd-button>
    <wd-input v-model="value" placeholder="请输入" />
    <wd-toast />
  </view>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const value = ref("");
</script>

补充

如果你需要手动导入某些方法（如 useToast、useDialog）：

import { useToast } from "@wot-ui/ui";

const toast = useToast();
toast.show("Hello Wot UI");

最后一步

重启项目

pnpm dev:mp