plm-frontend/README.md

Vue 3 + TypeScript 前端模板

开箱即用的企业级前端开发脚手架

技术栈

• 框架: Vue 3.5 + TypeScript 5.x
• 构建工具: Vite 8.x
• UI 库: Element Plus 2.x
• 状态管理: Pinia 3.x
• 路由: Vue Router 5.x
• HTTP 客户端: Axios
• 数据可视化: ECharts 6.x
• 代码规范: ESLint + Prettier

快速开始

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产构建
pnpm preview

# 类型检查
pnpm typecheck

# 代码格式化
pnpm format

# 代码检查
pnpm lint

项目结构

frontend/
├── src/
│   ├── api/              # API 请求封装
│   │   ├── index.ts      # Axios 实例和请求方法
│   │   └── user.ts       # 用户相关 API
│   ├── components/       # 组件目录
│   │   ├── common/       # 通用组件
│   │   └── business/     # 业务组件
│   ├── hooks/            # 组合式函数
│   ├── router/           # 路由配置
│   ├── store/            # Pinia 状态管理
│   │   ├── index.ts      # Store 入口
│   │   └── user.ts       # 用户状态
│   ├── styles/           # 全局样式
│   │   ├── global.css    # CSS 变量和重置
│   │   └── index.css     # 样式入口
│   ├── types/            # TypeScript 类型定义
│   ├── utils/            # 工具函数
│   ├── views/            # 页面组件
│   │   ├── Home.vue      # 首页
│   │   ├── About.vue     # 关于页面
│   │   └── NotFound.vue  # 404 页面
│   ├── App.vue           # 根组件
│   └── main.ts           # 入口文件
├── public/               # 静态资源
├── .env                  # 环境变量
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
└── vite.config.ts        # Vite 配置

功能特性

• ✅ TypeScript 类型安全
• ✅ Vue 3 Composition API
• ✅ 路由懒加载
• ✅ Axios 请求封装
• ✅ Pinia 状态管理
• ✅ Element Plus UI
• ✅ ECharts 图表
• ✅ CSS 变量主题
• ✅ 深色模式支持
• ✅ 代码规范配置

开发规范

组件命名

• 组件文件使用 PascalCase：UserCard.vue
• 组件目录使用 kebab-case：user-card/

样式规范

• 使用 CSS 变量定义主题色
• 组件样式使用 scoped
• 遵循 BEM 命名规范

API 规范

• API 统一放在 src/api/ 目录
• 使用 TypeScript 定义请求和响应类型
• 统一使用封装的 request 方法

环境变量

变量名	说明	示例
VITE_API_BASE_URL	API 基础地址	/api
VITE_APP_TITLE	应用标题	Vue 3 App

---

Created by Frontend Developer Agent 🎨