README.md · 王../template-uni-v3-ts

# template-uni-v3-ts

基于 uni-app 的 Vue3 + TypeScript 模板项目

## 特性

- 🚀 基于 Vue 3 + TypeScript
- 📱 支持多端开发（H5、小程序、App）
- 🎨 集成 Wot Design UI 组件库
- 🎯 集成 UnoCSS 原子化 CSS
- 📦 集成 Pinia 状态管理
- 🔧 完善的开发工具链
- 📝 规范的代码提交
- 🛠️ 丰富的构建优化

## 核心框架

- Vue 3.5.11
- uni-app 3.0.0
- TypeScript 5.3.3
- Vite 5.1.4

## 项目结构

```bash
src/
├── api/          # API 接口
├── components/   # 公共组件
├── composables/  # 组合式函数
├── config/       # 配置文件
├── enum/         # 枚举定义
├── hooks/        # 自定义 hooks
├── pageExamples/ # 示例页面（分包）
├── pages/        # 页面（主包）
├── static/       # 静态资源
├── store/        # 状态管理
├── styles/       # 样式文件
├── test/         # 测试文件
├── types/        # 类型定义
├── utils/        # 工具函数
├── App.vue       # 应用入口
├── main.ts       # 入口文件
├── manifest.json # 应用配置
├── pages.json    # 页面配置
└── uni.scss      # uni 样式
```

## 主要依赖

- `@dcloudio/uni-app`: uni-app 核心库
- `vue`: Vue 3 框架
- `pinia`: 状态管理
- `pinia-plugin-persistedstate`: Pinia 持久化插件
- `dayjs`: 日期处理
- `lodash-es`: 工具函数库
- `luch-request`: 网络请求库
- `wot-design-uni`: UI 组件库
- `unocss`: 原子化 CSS 框架

## 开发工具

- TypeScript: 类型检查
- ESLint: 代码质量检查
- Prettier: 代码格式化
- Husky: Git hooks
- lint-staged: 暂存文件检查
- commitlint: Git 提交信息规范检查
- Vue DevTools: Vue 开发工具

## 快速开始

### 说明

本项目使用 pnpm 作为包管理器，使用其他包管理器（如 npm、yarn）可能会导致依赖安装错误。

### 环境要求

- Node.js >= 16
- pnpm >= 8（如果尚未安装，请执行：`npm install -g pnpm`）

### 安装依赖

```bash
pnpm install
```

### 开发命令

```bash
# H5 开发
pnpm dev

# 微信小程序开发
pnpm dev:mp-weixin

# App 开发
pnpm dev:app
```

### 构建命令

```bash
# H5 构建
pnpm build

# 微信小程序构建
pnpm build:mp-weixin

# App 构建
pnpm build:app
```

### 其他命令

```bash
# 类型检查
pnpm type-check

# 代码检查
pnpm lint

# 代码格式化
pnpm format
```

## 开发规范

### 代码规范

- ESLint 配置
  - Vue 3 基础规则集
  - TypeScript 支持
  - Prettier 集成
  - 自定义规则

- Prettier 配置
  - 行宽限制：100
  - 缩进：2 空格
  - 不使用分号
  - 使用单引号
  - 尾随逗号
  - 括号间距
  - 箭头函数参数括号

### Git 提交规范

使用 Conventional Commits 规范，格式如下：

```bash
<type>(<scope>): <subject>

<body>

<footer>
```

#### 提交类型

- `feat`: 新功能
- `fix`: 修复 bug
- `docs`: 文档
- `style`: 代码格式
- `refactor`: 重构
- `perf`: 性能优化
- `test`: 测试相关
- `chore`: 构建工具
- `revert`: 回滚
- `build`: 构建系统
- `ci`: CI 配置
- `init`: 项目初始化
- `merge`: 分支合并
- `release`: 版本发布

#### 提交说明

- `scope` 是可选的，用于说明提交影响的范围
- 可以自定义 `type` 和 `scope`，但建议保持一致性
- `subject` 是必填的，简要说明本次提交的内容
- `body` 是可选的，详细说明本次提交的内容
- `footer` 是可选的，用于说明不兼容的改动或关闭的 issue

#### 示例

```bash
# 基础示例
feat: 添加用户登录功能
fix: 修复请求超时问题
docs: 更新项目说明文档

# 带 scope 的示例
feat(login): 添加用户登录功能
fix(api): 修复请求超时问题
docs(readme): 更新项目说明文档

# 带 body 的示例
feat(login): 添加用户登录功能

- 添加手机号登录
- 添加微信登录
- 添加验证码登录

# 带 footer 的示例
fix(api): 修复请求超时问题

修复了请求超时的问题，优化了错误处理

Closes #123

# 自定义 scope 示例
feat(auth): 添加认证功能
fix(ui): 修复样式问题
```

## 构建优化

### 路径别名

```typescript
// vite.config.ts
resolve: {
  alias: {
    '@': resolve(__dirname, 'src'),
    '@styles': resolve(__dirname, 'src/styles'),
  },
}
```

### SCSS 抽象层全局注入

```typescript
// vite.config.ts
css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@use "@styles/abstracts" as *;',
    },
  },
}
```

### 静态资源打包位置

```typescript
// vite.config.ts
build: {
  outDir: 'dist',
  assetsDir: 'static',
  rollupOptions: {
    input: {
      main: resolve(__dirname, 'src/main.ts'),
    },
    output: {
      entryFileNames: 'static/js/[name].[hash].js',
      chunkFileNames: 'static/js/[name].[hash].js',
      assetFileNames: 'static/[ext]/[name].[hash].[ext]',
    },
  },
}
```

### H5 代码分割

```typescript
// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: {
        'vue-vendor': ['vue', 'vue-i18n'],
        'uni-vendor': ['@dcloudio/uni-app'],
        'ui-vendor': ['wot-design-uni'],
        'lodash-es': ['lodash-es'],
        pinia: ['pinia', 'pinia-plugin-persistedstate'],
      },
    },
  },
}
```

### H5 资源压缩

```typescript
// vite.config.ts
plugins: [
  viteCompression({
    verbose: true,
    disable: false,
    threshold: 10240,
    algorithm: 'gzip',
    ext: '.gz',
    deleteOriginFile: false,
  }),
]
```

### 生产环境优化

```typescript
// vite.config.ts
build: {
  // 使用 terser 压缩器，增强压缩效果。as const 用于类型收窄
  minify: 'terser' as const,
  terserOptions: {
    compress: {
      // 生产环境移除 console
      drop_console: process.env.NODE_ENV === 'production',
      // 生产环境移除 debugger
      drop_debugger: process.env.NODE_ENV === 'production',
    },
  },
}
```

## 许可证

[MIT](./LICENSE)

王../template-uni-v3-ts

简介

发行版 (1)

贡献者

近期动态

王../template-uni-v3-ts .gitee-modal { width: 500px !important; }

简介

发行版 (1)

贡献者

近期动态

搜索帮助

王../template-uni-v3-ts