
### 目录结构
```
src/
├── api/                    # API 接口管理
│   ├── modules/           # 模块化 API
│   │   ├── auth.ts
│   │   ├── user.ts
│   │   └── product.ts
│   ├── request.ts         # Axios 配置和拦截器
│   ├── types/             # API 类型定义
│   └── index.ts           # API 统一导出
├── assets/                # 静态资源
│   ├── images/
│   ├── fonts/
│   ├── svg/              # SVG 图标
│   └── styles/
│       ├── variables.scss # SCSS 变量
│       ├── mixins.scss    # SCSS 混合
│       ├── global.scss    # 全局样式
│       └── index.scss     # 样式入口
├── components/            # 组件
│   ├── common/           # 通用组件
│   │   ├── BaseButton/
│   │   │   ├── BaseButton.vue
│   │   │   ├── BaseButton.scss
│   │   │   └── index.ts
│   │   ├── BaseInput/
│   │   └── BaseModal/
│   ├── layout/           # 布局组件
│   │   ├── AppHeader.vue
│   │   ├── AppSidebar.vue
│   │   ├── AppFooter.vue
│   │   └── AppMain.vue
│   └── business/         # 业务组件
├── views/                # 页面视图
│   ├── Login/
│   │   ├── Login.vue
│   │   ├── Login.scss
│   │   └── components/   # 页面内部组件
│   ├── Dashboard/
│   ├── UserManagement/
│   └── ProductManagement/
├── stores/               # Pinia 状态管理
│   ├── modules/          # Store 模块
│   │   ├── auth.ts
│   │   ├── user.ts
│   │   └── product.ts
│   ├── types/            # Store 类型定义
│   └── index.ts          # Store 统一导出
├── router/               # 路由配置
│   ├── routes/           # 路由定义
│   │   ├── index.ts
│   │   ├── public.ts     # 公开路由
│   │   └── private.ts    # 私有路由
│   ├── guards/           # 路由守卫
│   │   ├── auth.ts
│   │   └── permission.ts
│   └── index.ts          # 路由主文件
├── composables/          # 组合式函数
│   ├── useFetch.ts
│   ├── useForm.ts
│   ├── useLocalStorage.ts
│   └── useDebounce.ts
├── utils/                # 工具函数
│   ├── helpers/          # 辅助函数
│   ├── validators/       # 验证函数
│   ├── formatters/       # 格式化函数
│   ├── constants.ts      # 常量
│   └── index.ts          # 统一导出
├── directives/           # 自定义指令
│   ├── v-permission.ts
│   ├── v-loading.ts
│   └── v-lazy.ts
├── plugins/              # Vue 插件
│   ├── element-plus.ts   # UI 库引入
│   ├── i18n.ts          # 国际化
│   └── index.ts         # 插件安装
├── types/                # 全局类型定义
│   ├── global.d.ts
│   ├── shims-vue.d.ts
│   └── modules/          # 模块类型
├── App.vue               # 根组件
├── main.ts               # 入口文件
├── env.d.ts              # 环境变量类型
└── auto-imports.d.ts     # 自动导入类型

public/                   # 静态资源
├── index.html
├── favicon.ico
└── robots.txt

tests/
├── unit/                 # 单元测试
├── e2e/                  # 端到端测试
└── mocks/                # 模拟数据

scripts/                  # 脚本文件
├── build.js
├── deploy.js
└── analyze.js

docs/                     # 项目文档
├── api/
├── components/
└── deployment/

storybook/                # Storybook 配置
├── main.js
└── preview.js
```

### 关键配置文件

#### package.json 示例
```json
{
  "name": "vue-enterprise-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "build-only": "vite build",
    "preview": "vite preview",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "format": "prettier --write \"src/**/*.{vue,ts,tsx,js,json,css,scss}\"",
    "test:unit": "vitest",
    "test:e2e": "cypress run",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "^4.2.4",
    "pinia": "^2.1.4",
    "axios": "^1.4.0",
    "element-plus": "^2.3.4",
    "@element-plus/icons-vue": "^2.1.0",
    "dayjs": "^1.11.9",
    "lodash-es": "^4.17.21",
    "nprogress": "^0.2.0",
    "screenfull": "^6.0.2",
    "vue-i18n": "^9.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/tsconfig": "^0.4.0",
    "typescript": "^5.1.3",
    "vue-tsc": "^1.4.2",
    "vite": "^4.3.9",
    "unplugin-vue-components": "^0.25.0",
    "unplugin-auto-import": "^0.16.6",
    "@types/node": "^20.3.1",
    "sass": "^1.62.1",
    "eslint": "^8.43.0",
    "eslint-plugin-vue": "^9.15.1",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "prettier": "^2.8.8",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "vitest": "^0.32.2",
    "@vue/test-utils": "^2.3.2",
    "jsdom": "^22.1.0",
    "cypress": "^12.15.0",
    "@storybook/vue3": "^7.0.24",
    "npm-run-all": "^4.1.5"
  }
}
```

#### Vite 配置 (vite.config.ts)
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts',
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/components.d.ts',
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
      '@views': resolve(__dirname, 'src/views'),
      '@stores': resolve(__dirname, 'src/stores'),
      '@utils': resolve(__dirname, 'src/utils'),
      '@api': resolve(__dirname, 'src/api'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/variables.scss"; @import "@/assets/styles/mixins.scss";`
      }
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router', 'pinia'],
          'element-plus': ['element-plus'],
          'charts': ['echarts']
        }
      }
    }
  }
})
```


