create-erp-yhsp

一个用于快速创建 Vue3 + Vite + Vant4 移动端项目的脚手架工具。

特性

• 🚀 Vue 3 - 采用最新的Vue3 Composition API
• ⚡ Vite - 极速的构建工具，开发体验更佳
• 📱 Vant 4 - 轻量、可靠的移动端组件库
• 🗂 Vue Router - 官方路由管理器
• 🍍 Pinia - 新一代状态管理库
• 🎨 Sass - CSS预处理器，支持变量和混合
• 📏 ESLint + Prettier - 代码规范和格式化
• 📦 Axios - HTTP客户端，支持请求/响应拦截
• 🔧 pnpm - 快速、节省磁盘空间的包管理器

使用方法

全局安装

npm install -g create-erp-yhsp

创建项目

# 创建新项目
create-erp-yhsp my-project

# 或者不指定项目名，工具会提示你输入
create-erp-yhsp

进入项目并启动

cd my-project
pnpm install
pnpm run dev

项目结构

生成的项目包含以下结构：

my-project/
├── public/
│   └── vite.svg
├── src/
│   ├── api/                 # API接口管理
│   ├── assets/             # 静态资源
│   ├── components/         # 通用组件
│   ├── router/             # 路由配置
│   ├── stores/             # 状态管理
│   ├── styles/             # 样式文件
│   ├── utils/              # 工具函数
│   ├── views/              # 页面组件
│   ├── App.vue             # 根组件
│   └── main.js             # 入口文件
├── .env                    # 环境变量
├── .env.development        # 开发环境变量
├── .env.production         # 生产环境变量
├── .gitignore              # Git忽略文件
├── .prettierrc             # Prettier配置
├── eslint.config.js        # ESLint配置
├── index.html              # HTML模板
├── package.json            # 项目配置
└── vite.config.js          # Vite配置

可用脚本

在项目目录中，你可以运行：

• pnpm run dev - 启动开发服务器
• pnpm run build - 构建生产版本
• pnpm run preview - 预览生产构建
• pnpm run lint - 运行ESLint检查并自动修复
• pnpm run format - 格式化代码
• pnpm run lint:check - 仅检查代码规范
• pnpm run format:check - 仅检查代码格式

开发指南

环境变量

项目支持多环境配置：

• .env - 所有环境的默认配置
• .env.development - 开发环境配置
• .env.production - 生产环境配置

路径别名

项目已配置路径别名，可以使用：

• @ - src目录
• @components - src/components目录
• @views - src/views目录
• @utils - src/utils目录
• @stores - src/stores目录
• @styles - src/styles目录
• @assets - src/assets目录