@wuyubo/create-cll-app v1.0.0

create-cll-app

一个现代化的前端项目脚手架，基于 Vue 3 + Vite + TypeScript，提供多种可选功能。

环境要求

• Node.js >= 18.0.0
• npm >= 8.x

开发此项目需要：

• Git
• Node.js
• 包管理器 (npm, yarn 或 pnpm)

特性

• ⚡️ Vue 3 + Vite + TypeScript
• 📦 开箱即用的工程化配置
• 🔧 默认集成 commitlint（自动生成 commitlint.config.js）
• 🎨 默认配置 husky（自动设置 Git hooks）
• 🎨 可选 ESLint/Prettier 代码规范
• 📊 ESLint 和 Prettier 无缝集成
• 📊 可选 Pinia 状态管理
• 🔌 可选 Axios 请求库
• 🎭 可选 Mock 数据
• 🎯 可选 Tailwind CSS

快速开始

你可以使用以下任意一种方式来创建项目：

# 使用 npx (推荐)
npx @wuyubo/create-cll-app my-app

# 或者使用 npm
npm init @wuyubo/cll-app my-app

# 或者使用 yarn
yarn create @wuyubo/cll-app my-app

# 或者使用 pnpm
pnpm create @wuyubo/cll-app my-app

默认情况下，将进入交互式命令行界面，引导你选择项目配置：

• 是否使用 TypeScript
• 选择代码规范工具（ESLint/Prettier）
• 是否使用 Pinia
• 是否使用 Axios
• 是否使用 Mock
• 是否使用 Tailwind CSS

注意：所有创建的项目都会默认包含以下配置：

• commitlint 配置（自动生成 commitlint.config.js 文件），用于规范化 Git 提交信息
• husky 配置（自动设置 Git hooks），用于在 git commit 时自动执行 commitlint 检查

开发

创建项目后：

cd my-app        # 进入项目目录
npm install      # 安装依赖
npm run dev      # 启动开发服务器
npm run build   # 构建生产版本
npm run preview # 预览构建结果

代码规范

如果你选择了 ESLint 和 Prettier，可以使用以下命令来规范代码：

npm run lint    # ESLint 检查并修复
npm run format  # Prettier 格式化

Git 提交规范

项目默认集成了 commitlint 和 husky，提交代码时需要遵循以下格式：

git commit -m 'type: commit message'

可用的 type 类型：

• feat: 新功能
• fix: 修复
• docs: 文档
• style: 格式
• refactor: 重构
• perf: 性能
• test: 测试
• chore: 构建过程或辅助工具的变动
• revert: 回退

项目结构

my-app/
├── src/
│   ├── assets/         # 静态资源
│   ├── components/     # 组件
│   ├── stores/         # Pinia 状态管理（如果选择）
│   ├── utils/          # 工具函数
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── public/             # 公共资源
├── index.html          # HTML 模板
├── vite.config.ts      # Vite 配置
├── tsconfig.json       # TypeScript 配置（如果选择）
├── .eslintrc.js        # ESLint 配置（如果选择）
├── .prettierrc.js     # Prettier 配置（如果选择）
└── package.json        # 项目配置

命令行选项

你也可以通过命令行参数直接指定配置，跳过交互式选择：

TypeScript 支持

npx @wuyubo/create-cll-app my-app --typescript

代码规范工具

# 使用 ESLint
npx @wuyubo/create-cll-app my-app --eslint

# 使用 Prettier
npx @wuyubo/create-cll-app my-app --prettier

# 同时使用 ESLint 和 Prettier
npx @wuyubo/create-cll-app my-app --eslint --prettier

状态管理

npx @wuyubo/create-cll-app my-app --pinia

HTTP 请求

npx @wuyubo/create-cll-app my-app --axios

Mock 数据

npx @wuyubo/create-cll-app my-app --mock

Tailwind CSS

npx @wuyubo/create-cll-app my-app --tailwindcss

组合使用

你可以组合使用多个选项：

npx @wuyubo/create-cll-app my-app --typescript --eslint --pinia --axios

开发贡献

# 克隆项目
git clone https://github.com/wuyubo/create-cll-app.git

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 本地测试
npm link
create-cll-app test-app

许可证

MIT