使用 pnpm 安装 uView-Plus 的步骤与 npm 类似，但需要注意一些 pnpm 特有的配置。以下是详细步骤：

---

1. 确保已安装 pnpm

如果没有安装 pnpm，先全局安装：

npm install -g pnpm
# 或使用 Homebrew (macOS)
brew install pnpm

验证安装：

pnpm --version

---

2. 创建 Vue3 项目并安装依赖

在 HBuilderX 中创建 Vue3 项目后，在项目根目录打开终端，执行：

# 安装 uview-plus
pnpm add uview-plus

# 安装 SCSS 编译依赖
pnpm add -D sass@1.63.2 sass-loader@10.4.1

---

3. 配置 .npmrc（解决 pnpm 的依赖提升问题）

在项目根目录创建 .npmrc 文件，添加以下内容：

# 解决 pnpm 的模块路径问题
shamefully-hoist=true
public-hoist-pattern[]=*vue*
public-hoist-pattern[]=*sass*

为什么需要这个配置？
pnpm 默认使用符号链接管理依赖，会导致某些 uni-app 插件或 sass-loader 找不到依赖。设置 shamefully-hoist=true 可以让 pnpm 像 npm 一样提升依赖到 node_modules 根目录。

配置完成后，重新执行安装：

pnpm install

---

4. 配置 main.js

import { createSSRApp } from 'vue'
import App from './App.vue'
import uviewPlus from 'uview-plus'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return { app }
}

---

5. 配置 uni.scss

打开 uni.scss，在第一行添加：

@import "uview-plus/theme.scss";

---

6. 配置 App.vue

<style lang="scss">
/* 引入 uView 基础样式 */
@import "uview-plus/index.scss";
</style>

---

7. 配置 pages.json（easycom）

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  },
  "pages": [
    // 你的页面配置
  ]
}

---

8. 运行到微信小程序

pnpm run dev:mp-weixin

然后在微信开发者工具中打开 dist/dev/mp-weixin 目录。

---

完整的 package.json 示例

{
  "name": "your-project",
  "version": "1.0.0",
  "scripts": {
    "dev:mp-weixin": "uni -p mp-weixin",
    "build:mp-weixin": "uni build -p mp-weixin"
  },
  "dependencies": {
    "uview-plus": "^3.2.0"
  },
  "devDependencies": {
    "sass": "1.63.2",
    "sass-loader": "10.4.1"
  }
}

---

常见 pnpm 问题及解决

问题	解决方案
组件找不到或样式不生效	检查 .npmrc 中的 shamefully-hoist=true 是否配置并重新 pnpm install
sass-loader 报错	确保 sass 和 sass-loader 版本固定为 1.63.2 和 10.4.1
微信小程序白屏	清理缓存：删除 node_modules 和 pnpm-lock.yaml，重新 pnpm install
HBuilderX 中 pnpm 命令不可用	在 HBuilderX 设置中配置终端为系统终端，或在外部终端执行命令

---

配置完成后，用 <u-button type="primary">测试</u-button> 验证即可。如果遇到具体报错，可以把错误信息发给我帮你排查。