TouchVue UI

基于 Vue3 和 pnpm 的 monorepo 组件库项目。本项目使用pnpm作为默认的包管理工具。

项目结构

.
├── apps/                # 应用程序目录
│   ├── docs/            # 文档应用
│   └── playground/      # 组件演示应用
├── build/               # 构建相关配置
│   ├── task/            # 构建任务
│   └── utils/           # 构建工具
├── packages/            # 共享包目录（组件库、工具库等）
│   ├── components/      # UI组件
│   ├── themes/          # 主题样式
│   └── utils/           # 工具函数
├── scripts/             # 脚本工具
├── types/               # 类型定义
├── .eslintrc.cjs        # ESLint配置
├── .prettierrc          # Prettier配置
├── package.json         # 根目录依赖配置
├── pnpm-workspace.yaml  # pnpm 工作空间配置
└── README.md            # 项目说明文档

开发环境要求

• Node.js >= 16.0.0
• pnpm >= 8.0.0

注意: 本项目强制使用pnpm作为包管理工具，使用npm或yarn将会被拒绝。

安装pnpm

如果你还没有安装pnpm，可以使用以下命令安装：

npm install -g pnpm

安装依赖

pnpm install

常用命令

# 安装依赖
pnpm install

# 启动所有应用的开发服务器
pnpm dev

# 构建所有包
pnpm build

# 运行所有包的测试
pnpm test

# 运行ESLint检查并自动修复
pnpm lint

使用组件库

安装

npm install @touchvue/ui

基本使用

import { createApp } from 'vue';
import App from './App.vue';
import TouchVueUI from '@touchvue/ui';
// 引入样式
import '@touchvue/ui/theme/index.css';

const app = createApp(App);

// 注册组件库
app.use(TouchVueUI);

app.mount('#app');

全局配置

从 v1.0.0 版本开始，TouchVue UI 支持全局配置，你可以在注册组件库时传入配置项：

import { createApp } from 'vue';
import App from './App.vue';
import TouchVueUI from '@touchvue/ui';
import '@touchvue/ui/theme/index.css';

const app = createApp(App);

// 注册组件库并传入全局配置
app.use(TouchVueUI, {
  // 设置全局默认尺寸
  size: 'large', // 'large' | 'medium' | 'small'
  // 设置主题
  theme: 'default',
  // 设置语言
  locale: 'zh-CN',
  // 自定义配置
  customOption: 'value',
});

app.mount('#app');

在组件中使用全局配置

你可以在组件中使用 useGlobalConfig 函数获取全局配置：

<script setup>
import { useGlobalConfig } from '@touchvue/utils';

// 获取全局配置
const config = useGlobalConfig();
console.log(config.size); // 'large'
</script>

运行Prettier格式化

pnpm format

## 代码规范

本项目使用ESLint和Prettier来保证代码质量和一致的代码风格。

### ESLint

ESLint用于静态代码分析，帮助发现并修复代码中的问题。配置文件位于项目根目录的`.eslintrc.cjs`。

主要规则集：

- eslint:recommended
- plugin:vue/vue3-recommended
- plugin:@typescript-eslint/recommended
- prettier

### Prettier

Prettier用于代码格式化，确保团队代码风格一致。配置文件位于项目根目录的`.prettierrc`。

### Git提交校验

本项目使用husky和lint-staged在git提交前自动进行代码检查，确保提交的代码符合规范。

- 每次提交前会自动运行ESLint和Prettier检查
- 只有通过检查的代码才能被提交
- 检查仅针对暂存区的文件，不影响未修改的文件

配置文件：

- `.husky/pre-commit`: Git提交前的钩子脚本
- `.lintstagedrc.json`: lint-staged配置，指定对不同类型文件的检查规则

### VS Code集成

项目包含VS Code配置文件，推荐安装以下扩展：

- ESLint
- Prettier
- Volar (Vue Language Features)
- TypeScript Vue Plugin

安装这些扩展后，保存文件时会自动进行代码格式化和修复ESLint错误。

```bash
# 清理所有node_modules目录
pnpm clean

添加新包

添加组件库包

在 packages/ 目录下创建新的包：

cd packages
mkdir my-component
cd my-component
pnpm init

添加应用

在 apps/ 目录下创建新的应用：

cd apps
mkdir my-app
cd my-app
pnpm init

包管理

为特定包安装依赖

# 为特定包安装依赖
pnpm --filter package-name add dependency-name

# 为特定包安装开发依赖
pnpm --filter package-name add -D dependency-name

在包之间建立依赖关系

# 让 app-a 依赖 component-lib
pnpm --filter app-a add component-lib