安装指南

📦 环境准备

在开始之前，请确保您的开发环境满足以下要求：

必需工具

• Node.js: >= 18.0.0（推荐 v20+）
• pnpm: >= 8.0.0
• Git: 用于版本控制和克隆仓库

检查版本

# 检查 Node.js 版本
node -v

# 检查 pnpm 版本
pnpm -v

# 检查 Git
git --version

安装 Node.js

如果尚未安装 Node.js，请访问 Node.js 官网 下载并安装 LTS 版本。

安装 pnpm

# 使用 npm 安装
npm install -g pnpm

# 或使用 Corepack (Node.js 16.9+)
corepack enable
corepack prepare pnpm@latest --activate

🚀 安装方式

方式一：NPM 包安装（推荐）

如果您想将组件库作为依赖使用：

# 使用 pnpm（推荐）
pnpm add @lerna-web-ui/ui

# 使用 npm
npm install @lerna-web-ui/ui

# 使用 yarn
yarn add @lerna-web-ui/ui

方式二：本地开发安装

如果您想在本地开发和测试组件库：

1. 克隆仓库

git clone <repository-url> lerna-web-ui
cd lerna-web-ui

2. 安装依赖

# 安装根项目依赖
pnpm install

# 初始化 Lerna，链接所有子包
pnpm run bootstrap

3. 构建组件库

# 构建所有模块
pnpm run build

# 或单独构建 UI 包
pnpm run build:ui

4. 本地链接使用

在项目中使用 pnpm link 进行本地开发测试：

# 在组件库目录
cd packages/ui
pnpm link --global

# 在您的 Vue 项目中
pnpm link --global @lerna-web-ui/ui

📋 系统要求

浏览器支持

Browser	Version
Chrome	>= 90
Firefox	>= 88
Safari	>= 14
Edge	>= 90

⚠️ 注意: 不支持 IE11 及更早版本的浏览器

框架版本要求

• Vue: ^3.0.0（推荐 3.5+）
• TypeScript: ^5.0.0（可选，强烈推荐）

🔧 Vite 项目

手动导入

<template>
  <Button type="primary">Auto imported</Button>
  <Input v-model="value" />
</template>

<script setup lang="ts">
import { Button, Input } from '@lerna-web-ui/ui'
</script>

🎨 样式引入

手动引入

在全局样式文件或入口文件中引入：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@lerna-web-ui/ui/dist/style.css'

createApp(App).mount('#app')

⚙️ TypeScript 配置

如果使用 TypeScript，建议在 tsconfig.json 中添加以下配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "types": ["@lerna-web-ui/ui"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue"]
}

🐛 常见问题

问题：安装后提示找不到模块

解决方案：

1. 清除缓存重新安装：

rm -rf node_modules pnpm-lock.yaml
pnpm install

2. 确保使用的是 pnpm 而非 npm/yarn

问题：样式未生效

解决方案：

1. 检查是否正确引入了样式文件
2. 确认 CSS 加载顺序正确
3. 检查是否有 CSS 模块化或作用域问题

问题：TypeScript 类型错误

解决方案：

1. 确保安装了正确的 TypeScript 版本（>= 5.0.0）
2. 检查 tsconfig.json 中的路径配置
3. 尝试运行 pnpm run type-check 检查类型

问题：Vite 热更新不生效

解决方案：

1. 清除 Vite 缓存：

rm -rf node_modules/.vite

2. 重启开发服务器
3. 检查 vite.config.ts 配置是否正确

📝 下一步

安装完成后，您可以：

• 查看 快速开始 了解如何使用组件
• 浏览 组件列表 查看所有可用组件
• 阅读 主题定制 学习如何自定义样式

---

💡 提示: 推荐使用 pnpm 作为包管理器，它能提供更好的依赖管理和更快的安装速度。