gridsum-vue3-pc

快速生成基于 Vue3 + Vite + TypeScript 的企业级 PC 端项目

功能特性

• 🔧 CI/CD：GitHub Actions、GitLab CI、Jenkins
• 🎯 代码规范：ESLint + Prettier + Stylelint + Commitlint
• 🧪 测试：Vitest + Playwright
• 🛡️ 类型安全：Zod 环境变量校验 + TypeScript 严格模式
• 🐳 Docker 生产部署就绪
• 🌐 国际化：中英文支持

技术栈

Vue 3.5 + Vite 5 + TypeScript 5.5 + Pinia + Vue Router 4 + Element Plus + Axios + Zod

环境要求

• Node.js >= 18

快速开始

# 全局安装
npm install -g gridsum-vue3-pc

# npx 直接使用
gridsum-vue3-pc

# 或使用简写
gsvue

命令行选项

| 选项 | 说明 | 默认值 | |------|------|--------| | --name <name> | 项目名称 | vue3-project | | --title <title> | 项目标题 | Vue3 PC Template | | --cicd <type> | CI/CD 类型 (github / gitlab / jenkins) | 无 | | --force | 强制覆盖已存在目录 | false | | --auto-start | 创建后自动启动开发服务器 | false | | --no-auto-install | 跳过依赖安装 | false | | --no-git | 跳过 git 初始化 | false |

项目结构

my-project/
├── src/
│   ├── assets/        # 静态资源
│   ├── components/    # 公共组件
│   ├── directives/    # 全局指令 (v-permission)
│   ├── locales/       # 国际化
│   ├── router/        # 路由
│   ├── services/      # 网络请求 (Axios 封装)
│   ├── store/         # 状态管理 (Pinia)
│   ├── views/         # 页面
│   │   └── error/     # 错误页面 (403/404/500)
│   ├── composables/   # 组合式函数
│   ├── env.ts         # 环境变量校验 (Zod)
│   ├── main.ts        # 入口文件
│   └── env.d.ts       # TypeScript 环境声明
├── mock/              # Mock 数据
├── tests/             # 测试
├── Dockerfile         # Docker 配置
├── nginx.conf         # Nginx 配置
└── vite.config.ts     # Vite 配置

生成项目后

cd my-project
npm run dev      # 启动开发服务器 (默认 3000 端口)
npm run build    # 构建生产版本 (含 TypeScript 类型检查)
npm run lint     # 代码检查
npm run test     # 运行测试

Docker 部署

docker build -t my-project .
docker run -p 80:80 my-project

许可证

MIT