docs: reorganize documentation structure

2026-03-05 13:48:13 +08:00
parent 349b0a754f
commit 104fa7e7c8
59 changed files with 22859 additions and 916 deletions
@@ -0,0 +1,928 @@
+# 健身房管理系统前端工程化建设文档
+
+> 文档编号: GYM-FE-ENG-001  
+> 版本: v1.0  
+> 日期: 2026-03-04  
+> 作者: 张翔  
+> 状态: 初稿
+
+---
+
+## 文档修订历史
+
+| 版本 | 日期 | 作者 | 修订内容 |
+| ---- | ---------- | ---- | -------- |
+| v1.0 | 2026-03-04 | 张翔 | 创建前端工程化建设文档 |
+
+---
+
+## 参考文档
+
+- 《健身房管理系统前端技术架构详细设计》 GYM-FE-ARCH-001
+- 《健身房管理系统前端开发规范》 GYM-FE-DEV-001
+- Vite 官方文档
+- GitHub Actions 文档
+
+---
+
+## 一、工程化概述
+
+### 1.1 工程化目标
+
+- **提高开发效率**：自动化重复性工作，减少手动操作
+- **保证代码质量**：通过自动化检查和测试，确保代码质量
+- **统一开发规范**：通过工具强制执行代码规范
+- **简化部署流程**：自动化构建和部署，减少人为错误
+- **提升团队协作**：统一开发环境和工具链
+
+### 1.2 工程化体系
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                          前端工程化体系                              │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                         │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │ 开发工具链                                             │   │
+│  ├─────────────────────────────────────────────────────────────────┤   │
+│  │ • Node.js  • npm/yarn  • Git  • VSCode                    │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                              │                                        │
+│                              ▼                                        │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │ 构建工具                                               │   │
+│  ├─────────────────────────────────────────────────────────────────┤   │
+│  │ • Vite  • TypeScript  • ESLint  • Prettier                  │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                              │                                        │
+│                              ▼                                        │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │ 代码质量工具                                           │   │
+│  ├─────────────────────────────────────────────────────────────────┤   │
+│  │ • Husky  • Commitlint  • Lint-staged  • Stylelint          │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                              │                                        │
+│                              ▼                                        │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │ 测试工具                                               │   │
+│  ├─────────────────────────────────────────────────────────────────┤   │
+│  │ • Vitest  • Playwright  • Coverage  • Testing Library       │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                              │                                        │
+│                              ▼                                        │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │ CI/CD工具                                              │   │
+│  ├─────────────────────────────────────────────────────────────────┤   │
+│  │ • GitHub Actions  • Docker  • Nginx  • CDN                 │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 二、构建工具配置
+
+### 2.1 Vite配置
+
+#### 2.1.1 基础配置
+
+```typescript
+// vite.config.ts
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+        '@components': resolve(__dirname, 'src/components'),
+        '@utils': resolve(__dirname, 'src/utils'),
+        '@api': resolve(__dirname, 'src/api'),
+        '@stores': resolve(__dirname, 'src/stores')
+      }
+    },
+    server: {
+      port: 5173,
+      host: true,
+      open: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_API_BASE_URL,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
+      }
+    },
+    build: {
+      outDir: 'dist',
+      assetsDir: 'assets',
+      sourcemap: mode === 'development',
+      minify: 'terser',
+      terserOptions: {
+        compress: {
+          drop_console: mode === 'production',
+          drop_debugger: mode === 'production',
+          pure_funcs: mode === 'production' ? ['console.log', 'console.info'] : []
+        }
+      },
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'vue-vendor': ['vue', 'vue-router', 'pinia'],
+            'element-plus': ['element-plus'],
+            'utils': ['lodash-es', 'dayjs'],
+            'crypto': ['crypto-js', 'jsencrypt']
+          }
+        }
+      },
+      chunkSizeWarningLimit: 1000
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@import "@/assets/styles/variables.scss";`
+        }
+      }
+    }
+  }
+})
+```
+
+#### 2.1.2 插件配置
+
+```typescript
+// vite.config.ts
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Compression from 'vite-plugin-compression'
+import { visualizer } from 'rollup-plugin-visualizer'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      imports: ['vue', 'vue-router', 'pinia'],
+      dts: 'src/auto-imports.d.ts',
+      eslintrc: {
+        enabled: true
+      }
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+      dts: 'src/components.d.ts'
+    }),
+    Compression({
+      verbose: true,
+      disable: false,
+      threshold: 10240,
+      algorithm: 'gzip',
+      ext: '.gz'
+    }),
+    visualizer({
+      open: false,
+      gzipSize: true,
+      brotliSize: true
+    })
+  ]
+})
+```
+
+### 2.2 TypeScript配置
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@utils/*": ["src/utils/*"],
+      "@api/*": ["src/api/*"],
+      "@stores/*": ["src/stores/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+```
+
+### 2.3 环境变量配置
+
+```typescript
+// .env.development
+VITE_APP_TITLE=健身房管理系统(开发环境)
+VITE_API_BASE_URL=http://localhost:8080/api
+VITE_UPLOAD_URL=http://localhost:8080/upload
+VITE_WS_URL=ws://localhost:8080/ws
+VITE_SENTRY_DSN=
+VITE_CRYPTO_SECRET_KEY=your-secret-key-here
+VITE_RSA_PUBLIC_KEY=your-rsa-public-key-here
+
+// .env.production
+VITE_APP_TITLE=健身房管理系统
+VITE_API_BASE_URL=https://api.example.com/api
+VITE_UPLOAD_URL=https://api.example.com/upload
+VITE_WS_URL=wss://api.example.com/ws
+VITE_SENTRY_DSN=https://xxx@sentry.io/xxx
+VITE_CRYPTO_SECRET_KEY=your-production-secret-key-here
+VITE_RSA_PUBLIC_KEY=your-production-rsa-public-key-here
+
+// .env.staging
+VITE_APP_TITLE=健身房管理系统(测试环境)
+VITE_API_BASE_URL=https://staging-api.example.com/api
+VITE_UPLOAD_URL=https://staging-api.example.com/upload
+VITE_WS_URL=wss://staging-api.example.com/ws
+VITE_SENTRY_DSN=https://xxx@sentry.io/xxx
+VITE_CRYPTO_SECRET_KEY=your-staging-secret-key-here
+VITE_RSA_PUBLIC_KEY=your-staging-rsa-public-key-here
+```
+
+---
+
+## 三、代码规范工具
+
+### 3.1 ESLint配置
+
+```json
+// .eslintrc.json
+{
+  "extends": [
+    "plugin:vue/vue3-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module"
+  },
+  "plugins": ["vue", "@typescript-eslint", "prettier"],
+  "rules": {
+    "vue/multi-word-component-names": "off",
+    "vue/no-v-html": "warn",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "no-console": [
+      "warn",
+      {
+        "allow": ["warn", "error"]
+      }
+    ],
+    "no-debugger": "error",
+    "prettier/prettier": "error"
+  }
+}
+```
+
+### 3.2 Prettier配置
+
+```json
+// .prettierrc
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "jsxSingleQuote": false,
+  "proseWrap": "preserve"
+}
+```
+
+### 3.3 Stylelint配置
+
+```json
+// .stylelintrc.json
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "rules": {
+    "selector-class-pattern": "^[a-z][a-zA-Z0-9-__]*$",
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["deep", "global"]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": ["v-deep", "v-global", "v-slotted"]
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 四、自动化工具
+
+### 4.1 Husky配置
+
+```json
+// package.json
+{
+  "scripts": {
+    "prepare": "husky install",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "format": "prettier --write src/",
+    "lint:style": "stylelint \"src/**/*.{css,scss,vue}\" --fix"
+  }
+}
+```
+
+```bash
+# 初始化Husky
+npx husky install
+
+# 添加pre-commit钩子
+npx husky add .husky/pre-commit "npx lint-staged"
+
+# 添加commit-msg钩子
+npx husky add .husky/commit-msg "npx commitlint --edit $1"
+```
+
+### 4.2 Lint-staged配置
+
+```json
+// .lintstagedrc.json
+{
+  "*.{js,jsx,ts,tsx,vue}": [
+    "eslint --fix",
+    "prettier --write"
+  ],
+  "*.{css,scss,vue}": [
+    "stylelint --fix"
+  ],
+  "*.{json,md}": [
+    "prettier --write"
+  ]
+}
+```
+
+### 4.3 Commitlint配置
+
+```javascript
+// commitlint.config.js
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'ci']
+    ],
+    'type-case': [2, 'always', 'lower-case'],
+    'type-empty': [2, 'never'],
+    'scope-case': [2, 'always', 'lower-case'],
+    'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
+    'subject-empty': [2, 'never'],
+    'subject-full-stop': [2, 'never', '.'],
+    'header-max-length': [2, 'always', 100]
+  }
+}
+```
+
+---
+
+## 五、CI/CD流程
+
+### 5.1 GitHub Actions配置
+
+```yaml
+# .github/workflows/ci.yml
+name: CI
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Run ESLint
+        run: npm run lint
+      
+      - name: Run Prettier check
+        run: npm run format:check
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Run unit tests
+        run: npm run test:unit
+      
+      - name: Upload coverage
+        uses: codecov/codecov-action@v3
+        with:
+          files: ./coverage/coverage-final.json
+          fail_ci_if_error: true
+
+  build:
+    runs-on: ubuntu-latest
+    needs: [lint, test]
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Build
+        run: npm run build
+      
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: dist/
+```
+
+### 5.2 CD配置
+
+```yaml
+# .github/workflows/cd.yml
+name: CD
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Build
+        run: npm run build
+      
+      - name: Deploy to server
+        uses: easingthemes/ssh-deploy@v3
+        with:
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
+          REMOTE_USER: ${{ secrets.REMOTE_USER }}
+          TARGET: /var/www/gym-manage/frontend
+          SOURCE: dist/
+```
+
+---
+
+## 六、项目脚手架
+
+### 6.1 项目初始化
+
+```bash
+# 创建新项目
+npm create vite@latest gym-manage-frontend -- --template vue-ts
+
+# 进入项目目录
+cd gym-manage-frontend
+
+# 安装依赖
+npm install
+
+# 安装开发依赖
+npm install -D \
+  @vitejs/plugin-vue \
+  unplugin-auto-import \
+  unplugin-vue-components \
+  sass \
+  eslint \
+  @typescript-eslint/parser \
+  @typescript-eslint/eslint-plugin \
+  eslint-plugin-vue \
+  prettier \
+  eslint-config-prettier \
+  eslint-plugin-prettier \
+  husky \
+  lint-staged \
+  @commitlint/cli \
+  @commitlint/config-conventional \
+  vitest \
+  @vue/test-utils \
+  @playwright/test \
+  rollup-plugin-visualizer \
+  vite-plugin-compression
+
+# 安装生产依赖
+npm install \
+  vue \
+  vue-router \
+  pinia \
+  axios \
+  dayjs \
+  lodash-es \
+  element-plus \
+  dompurify \
+  crypto-js \
+  jsencrypt \
+  web-vitals
+```
+
+### 6.2 目录结构初始化
+
+```bash
+# 创建目录结构
+mkdir -p src/{api,assets/{images,icons,styles},components/{base,business,layout},composables,config,directives,hooks,layouts,router,stores,types,utils,views}
+mkdir -p src/test/{unit,e2e}
+mkdir -p public
+
+# 创建配置文件
+touch .env.development .env.production .env.staging
+touch .eslintrc.json .prettierrc .stylelintrc.json
+touch tsconfig.json tsconfig.node.json
+```
+
+### 6.3 基础文件创建
+
+```typescript
+// src/main.ts
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+import router from './router'
+import './assets/styles/main.scss'
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.use(pinia)
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app')
+```
+
+```typescript
+// src/App.vue
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+#app {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</style>
+```
+
+---
+
+## 七、开发工具链
+
+### 7.1 VSCode配置
+
+```json
+// .vscode/settings.json
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "volar.takeOverMode.enabled": true,
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
+```
+
+```json
+// .vscode/extensions.json
+{
+  "recommendations": [
+    "vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "stylelint.vscode-stylelint",
+    "bradlc.vscode-tailwindcss",
+    "eamodio.gitlens"
+  ]
+}
+```
+
+### 7.2 Git配置
+
+```bash
+# .gitignore
+node_modules
+dist
+dist-ssr
+*.local
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.DS_Store
+*.log
+coverage
+.nyc_output
+.env.local
+.env.*.local
+```
+
+### 7.3 NPM脚本
+
+```json
+// package.json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "build:staging": "vue-tsc && vite build --mode staging",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
+    "lint:style": "stylelint \"src/**/*.{css,scss,vue}\" --fix",
+    "format": "prettier --write src/",
+    "format:check": "prettier --check src/",
+    "test": "vitest",
+    "test:unit": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "type-check": "vue-tsc --noEmit",
+    "prepare": "husky install"
+  }
+}
+```
+
+---
+
+## 八、最佳实践
+
+### 8.1 依赖管理
+
+#### 8.1.1 依赖版本管理
+
+```json
+// package.json
+{
+  "dependencies": {
+    "vue": "^3.4.0",
+    "vue-router": "^4.2.0",
+    "pinia": "^2.1.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "typescript": "^5.0.0",
+    "eslint": "^8.56.0"
+  }
+}
+```
+
+#### 8.1.2 依赖安全检查
+
+```bash
+# 检查依赖漏洞
+npm audit
+
+# 自动修复依赖漏洞
+npm audit fix
+
+# 强制修复依赖漏洞
+npm audit fix --force
+```
+
+### 8.2 性能监控
+
+#### 8.2.1 构建分析
+
+```bash
+# 生成构建分析报告
+npm run build
+
+# 查看分析报告
+open stats.html
+```
+
+#### 8.2.2 Bundle大小优化
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vue-vendor': ['vue', 'vue-router', 'pinia'],
+          'element-plus': ['element-plus'],
+          'utils': ['lodash-es', 'dayjs']
+        }
+      }
+    },
+    chunkSizeWarningLimit: 500
+  }
+})
+```
+
+### 8.3 文档管理
+
+#### 8.3.1 README文档
+
+```markdown
+# 健身房管理系统前端
+
+## 项目介绍
+
+健身房管理系统前端项目，基于Vue3 + Vite + TypeScript构建。
+
+## 技术栈
+
+- Vue 3.4+
+- TypeScript 5.0+
+- Vite 5.0+
+- Pinia 2.1+
+- Element Plus 2.5+
+
+## 快速开始
+
+### 安装依赖
+
+\`\`\`bash
+npm install
+\`\`\`
+
+### 开发
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+### 构建
+
+\`\`\`bash
+npm run build
+\`\`\`
+
+### 测试
+
+\`\`\`bash
+npm run test
+\`\`\`
+
+## 项目结构
+
+\`\`\`
+src/
+├── api/           # API接口
+├── assets/        # 静态资源
+├── components/    # 组件
+├── composables/   # Composables
+├── config/        # 配置
+├── router/        # 路由
+├── stores/        # 状态管理
+├── types/         # 类型定义
+├── utils/         # 工具函数
+└── views/         # 页面
+\`\`\`
+
+## 开发规范
+
+详见 [前端开发规范](./docs/design/前端开发规范.md)
+
+## 许可证
+
+MIT
+```
+
+#### 8.3.2 CHANGELOG文档
+
+```markdown
+# Changelog
+
+## [1.0.0] - 2026-03-04
+
+### Added
+- 会员管理功能
+- 课程预约功能
+- 扫码签到功能
+- 数据统计功能
+
+### Changed
+- 升级Vue到3.4版本
+- 优化构建配置
+
+### Fixed
+- 修复预约时间冲突问题
+- 修复签到记录显示问题
+
+### Security
+- 添加XSS防护
+- 添加CSRF防护
+```
+
+---
+
+## 九、总结
+
+本文档详细描述了健身房管理系统前端的工程化建设，包括：
+
+1. **工程化概述**：工程化目标、工程化体系
+2. **构建工具配置**：Vite配置、TypeScript配置、环境变量配置
+3. **代码规范工具**：ESLint配置、Prettier配置、Stylelint配置
+4. **自动化工具**：Husky配置、Lint-staged配置、Commitlint配置
+5. **CI/CD流程**：GitHub Actions配置、CD配置
+6. **项目脚手架**：项目初始化、目录结构初始化、基础文件创建
+7. **开发工具链**：VSCode配置、Git配置、NPM脚本
+8. **最佳实践**：依赖管理、性能监控、文档管理
+
+通过遵循本文档的工程化建设指南，可以建立完善的前端工程化体系，提高开发效率、保证代码质量、简化部署流程。