create-yms-app

create-yms-app

YMS department Vue 3 project scaffolding tool

快速创建基于 Vue 3 + Vite + TypeScript + Naive UI + UnoCSS 的 YMS 项目脚手架，预置了半导体/晶圆制造主题的开箱即用 Dashboard、Wafer Map 等页面。

特性

• ⚡️ Vue 3 + Vite 8 — 极速开发体验
• 🎨 Naive UI + UnoCSS — 现代化 UI 组件 + 原子化 CSS
• 📦 开箱即用 — 预置 Dashboard、Wafer Map、路由、状态管理、HTTP 封装
• 🎯 半导体主题 — 为晶圆制造/良率管理场景定制的 UI 和示例页面
• 🧩 可选功能 — i18n、ECharts、权限、锁屏、应用更新检测
• 🔧 TypeScript + ESLint + Prettier — 开箱即用的代码规范

快速开始

使用 npm

npm create yms-app my-project
cd my-project
npm install
npm run dev

使用 pnpm（推荐）

pnpm create yms-app my-project
cd my-project
pnpm install
pnpm dev

使用 yarn

yarn create yms-app my-project
cd my-project
yarn install
yarn dev

可选功能

创建项目时会提示选择可选功能：

• I18n (vue-i18n) — 多语言支持，YAML 格式语言包
• ECharts — 图表组件，预置配置选项
• Permission — 路由级和按钮级权限系统
• Lock Screen — 锁屏功能
• App Update Detection — 自动检测新版本部署

预置页面

• Dashboard — 半导体主题首页，展示 KPI、良率趋势、活动时间线
• Wafer Map — SVG 绘制的晶圆图，支持 die-level pass/fail 可视化
• Placeholder — 通用占位页面，用于快速搭建新模块
• Login — 双面板登录页，带品牌墙和表单验证
• 404 — 晶圆主题 404 页面

技术栈

• Vue 3 — 渐进式 JavaScript 框架
• Vite 8 — 下一代前端构建工具
• TypeScript — JavaScript 的超集
• Naive UI — Vue 3 组件库
• UnoCSS — 即时按需原子化 CSS 引擎
• Pinia — Vue 状态管理
• Vue Router — Vue 官方路由

项目结构

my-project/
├── public/              # 静态资源
├── src/
│   ├── api/            # API 请求
│   ├── components/     # 全局组件
│   ├── layout/         # 布局组件
│   ├── router/         # 路由配置
│   ├── stores/         # Pinia 状态
│   ├── utils/          # 工具函数
│   ├── views/          # 页面组件
│   ├── App.vue
│   └── main.ts
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

脚本命令

npm run dev          # 启动开发服务器
npm run build        # 构建生产版本
npm run type-check   # TypeScript 类型检查
npm run lint         # ESLint 检查
npm run lint:fix     # ESLint 自动修复
npm run format       # Prettier 格式化

许可证

MIT

作者

YMS Department