# vue3+ts+pinia+swagger-typescript-api+code-inspector-plugin **Repository Path**: csdsb/vue3-Init-template ## Basic Information - **Project Name**: vue3+ts+pinia+swagger-typescript-api+code-inspector-plugin - **Description**: 干净的vue3初始化项目，融合了pinia + ts + swagger-typescript-api + axios 一键生成ts api文件，code-inspector-plugin快速定位代码，router路由 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-08-27 - **Last Updated**: 2025-08-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Graduate Service - 毕业生就业服务平台 > 基于 Vue 3.x + TypeScript + Vite + Element Plus 的现代化毕业生就业服务平台 ## 📋 项目简介 Graduate Service 是一个专为毕业生设计的现代化就业服务平台，采用 Vue 3.x Composition API + setup 语法糖，配合 TypeScript 提供类型安全的开发体验。平台集成了就业岗位查询、职业指导、就业政策、招聘会信息等核心功能，为毕业生提供全方位的就业服务。 ## 🚀 技术栈 - **Vue 3.x** - 渐进式 JavaScript 框架 - **TypeScript** - 类型安全的 JavaScript 超集 - **Vite** - 快速的构建工具和开发服务器 - **Element Plus** - 基于 Vue 3.x 的组件库 - **gxrcw-ui** - 自定义UI组件库 - **Vue Router 4** - Vue.js 的官方路由 - **Pinia** - 直观的状态管理库 - **Axios** - HTTP 客户端 - **swagger-typescript-api** - 自动生成TypeScript API客户端 - **Sass** - CSS 预处理器 - **ESLint** - 代码质量检查工具 - **code-inspector-plugin** - 代码检查和分析插件 ## 📦 项目结构 ``` graduateService/ ├── api_build/ # API构建工具 │ ├── build.bat # Windows构建脚本 │ ├── build.js # 构建脚本 │ ├── build.sh # Linux构建脚本 │ ├── del.js # 清理脚本 │ └── readme.md # 构建说明 ├── src/ # 源代码 │ ├── api/ # API相关 │ ├── api-services/ # API服务层 │ │ ├── apis/ # API接口定义 │ │ │ ├── user-api.ts # 用户相关API │ │ │ ├── position-api.ts # 岗位相关API │ │ │ ├── enterprise-api.ts # 企业相关API │ │ │ ├── news-api.ts # 新闻相关API │ │ │ ├── meeting-api.ts # 会议相关API │ │ │ ├── socialdynamics-api.ts # 社交动态API │ │ │ ├── data-api.ts # 数据相关API │ │ │ ├── discover-api.ts # 发现相关API │ │ │ ├── logo-api.ts # Logo相关API │ │ │ ├── salary-report-api.ts # 薪资报告API │ │ │ ├── schoolbroadcast-api.ts # 校园广播API │ │ │ ├── configuration-api.ts # 配置相关API │ │ │ ├── auto-complete-api.ts # 自动完成API │ │ │ ├── log-api.ts # 日志相关API │ │ │ ├── meeting-o2-oapi.ts # O2O会议API │ │ │ └── liuzhouwondersyun-api.ts # 柳州云API │ │ ├── models/ # API数据模型 │ │ ├── api.ts # API基础配置 │ │ ├── base.ts # 基础API类 │ │ ├── configuration.ts # API配置 │ │ └── index.ts # API服务入口 │ ├── assets/ # 静态资源 │ │ └── logo.svg │ ├── components/ # 公共组件 │ │ ├── home/ # 首页组件 │ │ │ ├── headerBanner.vue │ │ │ └── topMenu.vue │ │ └── public/ # 公共组件 │ │ ├── district-tree.json │ │ └── searchBox.vue │ ├── views/ # 页面组件 │ │ ├── home/ # 首页相关 │ │ │ ├── homeRouterView.vue │ │ │ └── index.vue │ │ ├── employmentJob/ # 就业岗位 │ │ │ └── index.vue │ │ ├── careerGuidance/ # 职业指导 │ │ │ └── index.vue │ │ ├── employmentPolicy/ # 就业政策 │ │ │ └── index.vue │ │ ├── jobFair/ # 招聘会 │ │ │ └── index.vue │ │ └── NotFound.vue # 404页面 │ ├── router/ # 路由配置 │ │ ├── index.ts # 主路由配置 │ │ ├── home.ts # 首页路由 │ │ └── permission.ts # 权限控制 │ ├── stores/ # Pinia状态管理 │ │ ├── index.ts # 状态管理入口 │ │ ├── user.ts # 用户状态 │ │ └── app.ts # 应用状态 │ ├── utils/ # 工具函数 │ │ ├── index.ts # 工具函数入口 │ │ ├── axios-utils.ts # Axios工具 │ │ ├── storage.ts # 存储工具 │ │ ├── validate.ts # 验证工具 │ │ └── format.ts # 格式化工具 │ ├── types/ # TypeScript类型定义 │ │ ├── index.ts # 类型定义入口 │ │ ├── api.ts # API类型 │ │ ├── common.ts # 通用类型 │ │ └── user.ts # 用户类型 │ ├── styles/ # 全局样式 │ │ └── index.css │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript配置 ├── vite.config.ts # Vite配置 ├── env.d.ts # 环境变量类型定义 ├── rules.md # 项目开发规则 └── README.md # 项目说明 ``` ## 🔧 开发环境要求 - Node.js >= 18.0.0 - npm >= 8.0.0 - 推荐使用 VSCode + Volar 扩展 ## 🛠️ 安装与运行 ### 1. 克隆项目 ```bash git clone cd graduateService ``` ### 2. 安装依赖 ```bash npm install ``` ### 3. 启动开发服务器 ```bash npm run dev ``` 项目将在 `http://localhost:5173` 启动 ### 4. 构建项目 ```bash npm run build ``` ### 5. 预览构建结果 ```bash npm run preview ``` ### 6. API构建（可选） ```bash npm run build-api ``` ## 📝 可用脚本 - `npm run dev` - 启动开发服务器 - `npm run build` - 构建生产版本 - `npm run preview` - 预览构建结果 - `npm run lint` - 运行 ESLint 检查 - `npm run type-check` - 运行 TypeScript 类型检查 - `npm run build-api` - 构建API客户端 ## 🌟 主要特性 ### 🎯 现代化开发体验 - Vue 3.x Composition API + setup 语法糖 - TypeScript 类型安全 - Vite 快速热重载 - 自动导入 API 和组件 - 代码检查插件支持 ### 🔍 代码检查与分析 - **code-inspector-plugin** - 实时代码检查和分析 - 代码质量监控 - 性能优化建议 - 代码规范检查 - 开发体验增强 [code-inspector-plugin]同时按住 Shift + Alt 时启用功能(点击页面元素可定位至编辑器源代码) ### 🎨 UI/UX - Element Plus 组件库 - gxrcw-ui 自定义组件库 - 响应式设计 - Sass 样式预处理 - 自定义 CSS 变量 ### 🔐 路由与权限 - 类型安全的路由配置 - 路由守卫和权限控制 - 页面级懒加载 - 404 页面处理 - 模块化路由设计 ### 📊 状态管理 - Pinia 状态管理 - TypeScript 支持 - 状态持久化 - 模块化设计 ### 🛡️ 工具函数 - HTTP 请求封装 - 表单验证工具 - 数据格式化工具 - 本地存储工具 ### 🔌 API集成 - swagger-typescript-api 自动生成 - 完整的API类型定义 - 统一的API调用接口 - 错误处理机制 ## 📚 核心功能 ### 🏠 首页服务 - 平台概览 - 快速导航 - 最新资讯展示 - 热门岗位推荐 ### 💼 就业岗位 - 岗位搜索与筛选 - 岗位详情展示 - 投递简历功能 - 岗位推荐算法 ### 🎯 职业指导 - 职业规划指导 - 简历制作指导 - 面试技巧分享 - 职业发展建议 ### 📋 就业政策 - 政策法规查询 - 政策解读 - 申请指南 - 政策更新通知 ### 🎪 招聘会 - 招聘会信息 - 在线招聘会 - 企业展示 - 预约参会 ### 👥 用户服务 - 用户注册登录 - 个人信息管理 - 简历管理 - 投递记录 ### 📊 数据分析 - 就业数据统计 - 薪资报告 - 行业分析 - 趋势预测 ## 🔨 开发规范 请参考 [rules.md](./rules.md) 文件了解详细的开发规范。 ### 代码风格 - 使用 ESLint 进行代码检查 - TypeScript 严格模式 - 统一的命名规范 - 组件化开发 ### 提交规范 - 使用语义化提交信息 - 代码审查流程 - 分支管理策略 ## 🔧 配置说明 ### Vite 配置 - 自动导入插件 (unplugin-auto-import) - Element Plus 按需引入 - 路径别名配置 (@ -> src) - 开发服务器配置 - 代理配置 (/api -> localhost:3000) - code-inspector-plugin 代码检查插件 ### TypeScript 配置 - 严格类型检查 - 路径映射 - 模块解析 - 类型声明 ### API配置 - swagger-typescript-api 自动生成 - 统一的API基础配置 - 请求拦截器 - 响应拦截器 - 错误处理 ### 环境变量 ```env VITE_APP_TITLE=Graduate Service VITE_APP_BASE_API=http://localhost:3000/api VITE_APP_ENV=development ``` ### 开发工具配置 #### code-inspector-plugin 项目集成了 `code-inspector-plugin` 插件，提供实时的代码检查和分析功能： - **实时检查**：在开发过程中实时监控代码质量 - **性能分析**：提供性能优化建议和警告 - **规范检查**：确保代码符合项目规范 - **错误预防**：提前发现潜在的问题和错误 配置位置：`vite.config.ts` ```typescript import { codeInspectorPlugin } from 'code-inspector-plugin'; export default defineConfig({ plugins: [ // ... 其他插件 codeInspectorPlugin({ bundler: 'vite', }) ] }) ``` ## 🚀 部署 ### 构建生产版本 ```bash npm run build ``` ### 部署到静态服务器 将 `dist` 目录部署到任意静态服务器即可。 ### 环境配置 - 开发环境：`npm run dev` - 测试环境：`npm run build` - 生产环境：`npm run build` ## 📖 API使用指南 ### API服务结构 项目使用 swagger-typescript-api 自动生成TypeScript API客户端，所有API定义位于 `src/api-services/apis/` 目录下。 ### 主要API模块 - **用户API** (user-api.ts) - 用户认证、信息管理 - **岗位API** (position-api.ts) - 岗位查询、投递 - **企业API** (enterprise-api.ts) - 企业信息、展示 - **新闻API** (news-api.ts) - 新闻资讯、公告 - **会议API** (meeting-api.ts) - 招聘会、会议管理 - **数据API** (data-api.ts) - 统计数据、分析 ### API调用示例 ```typescript import { userApi } from '@/api-services' // 用户登录 const loginResult = await userApi.login({ username: 'user', password: 'password' }) // 获取岗位列表 const positions = await positionApi.getPositionList({ page: 1, size: 10 }) ``` ## 🤝 贡献指南 1. Fork 本仓库 2. 创建功能分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 创建 Pull Request ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。 ## 🙏 致谢 感谢以下开源项目为本项目提供支持： - [Vue.js](https://vuejs.org/) - [TypeScript](https://www.typescriptlang.org/) - [Vite](https://vitejs.dev/) - [Element Plus](https://element-plus.org/) - [Vue Router](https://router.vuejs.org/) - [Pinia](https://pinia.vuejs.org/) - [swagger-typescript-api](https://github.com/acacode/swagger-typescript-api) - [code-inspector-plugin](https://github.com/zhangyuang/code-inspector) **Happy Coding! 🎉**