Radish Frontend CLI

基于 Vue 3 + PrimeVue 生态的现代化前端项目脚手架工具

简介

Radish Frontend CLI 是一个交互式的前端项目脚手架工具, 专为快速搭建 Vue 3 项目而设计.它提供了开箱即用的项目模板, 集成了现代化的前端开发工具链, 让您可以专注于业务开发

特性

• ✨ 交互式命令行界面
• 🚀 快速创建项目, 一键初始化
• 📦 自动安装依赖
• 🔄 可选的依赖版本自动更新
• 📝 可选的 Git 仓库初始化
• 🎨 集成 PrimeVue UI 组件库
• 🎯 集成 Tailwind CSS 样式框架
• 🔧 预配置 ESLint + Prettier
• 🌐 支持 Vue Router
• 📊 集成 Pinia 状态管理
• 🔌 支持多模板扩展

系统要求

• Node.js: ^20.19.0 || >=22.12.0
• npm 或其他包管理器

安装

全局安装

npm install -g radish-frontend-cli

本地开发测试

# 克隆仓库
git clone <repository-url>

# 安装依赖
cd radish-frontend-cli
npm install

# 本地测试
npm run dev create my-project

使用

创建新项目

radish-frontend create <project-name>

交互式流程

运行创建命令后, 脚手架会引导您完成以下选择:

1. 选择项目模板

   • vue3-primevue-tailwind-js (Vue 3 + PrimeVue + Tailwind CSS)
   • 更多模板持续更新中...

2. 是否更新依赖到最新版本

   • 是: 使用 npm-check-updates 将所有依赖更新到最新版本
   • 否: 使用模板中预配置的稳定版本

3. 是否初始化 Git 仓库

   • 是: 自动执行 git init 初始化 Git 仓库
   • 否: 跳过 Git 初始化

4. 确认或覆盖

   • 如果目录已存在, 会询问是否覆盖

项目启动

项目创建完成后, 执行以下命令启动开发服务器:

cd <project-name>
npm run dev

默认模板技术栈

核心框架

• Vue 3: 渐进式 JavaScript 框架
• Vue Router: 官方路由管理器
• Pinia: 官方状态管理库

UI 框架

• PrimeVue: 丰富的 Vue 3 UI 组件库
• Tailwind CSS: 实用优先的 CSS 框架
• PrimeIcons: 图标库

开发工具

• Vite: 下一代前端构建工具
• ESLint: 代码质量检查
• Prettier: 代码格式化工具

项目结构

my-project/
├── public/              # 静态资源
│   └── favicon.ico
├── src/
│   ├── assets/          # 样式资源
│   │   └── tailwind.css
│   ├── components/      # 通用组件
│   ├── router/          # 路由配置
│   │   └── index.js
│   ├── stores/          # Pinia 状态管理
│   ├── views/           # 页面组件
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── .editorconfig        # 编辑器配置
├── .gitignore           # Git 忽略配置
├── .prettierrc.json     # Prettier 配置
├── eslint.config.js     # ESLint 配置
├── index.html           # HTML 模板
├── jsconfig.json        # JavaScript 配置
├── package.json         # 项目依赖
├── postcss.config.js    # PostCSS 配置
├── tailwind.config.js   # Tailwind 配置
└── vite.config.js       # Vite 配置

可用命令

创建的项目中包含以下 npm 脚本:

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 代码检查和自动修复
npm run lint

# 代码格式化
npm run format

配置说明

VSCode 配置

模板包含了 .vscode/settings.json, 提供了以下配置:

• 保存时自动格式化
• Prettier 作为默认格式化工具
• Tailwind CSS 智能提示
• 代码保存时自动修复 ESLint 错误

ESLint 配置

项目使用 ESLint 9+ 的扁平配置格式, 集成了:

• Vue 3 官方规则
• Prettier 集成
• 自动导入支持

Tailwind CSS 配置

• 使用 Tailwind CSS v4 最新版本
• 双插件配置 (Vite + PostCSS) 确保最佳性能
  • @tailwindcss/vite: 极速开发体验
  • @tailwindcss/postcss: 生产构建优化
• 集成 Autoprefixer 自动添加浏览器前缀
• 集成 PrimeUI 主题
• 响应式设计支持
• 自动 Tree-shaking 未使用的样式

常见问题

1. 依赖安装失败怎么办?

如果自动安装失败, 请手动执行:

cd <project-name>
npm install

2. 如何更新依赖版本?

在创建项目时选择 "是否更新依赖到最新版本" 为 "是", 或在项目中手动执行:

npx npm-check-updates -u
npm install

3. 如何添加新的模板?

在 template/ 目录下创建新的模板文件夹, 脚手架会自动识别并在创建项目时提供选择.

4. Node.js 版本要求

项目要求 Node.js 版本为 ^20.19.0 || >=22.12.0, 请确保您的环境满足此要求.

开发计划

• [ ] 支持 TypeScript 模板
• [ ] 支持 React 模板
• [ ] 支持自定义模板配置
• [ ] 支持项目升级命令
• [ ] 集成更多 UI 框架选项

贡献指南

欢迎贡献代码、报告问题或提出建议!

许可证

ISC License

相关链接

• Vue 3 文档
• PrimeVue 文档
• Tailwind CSS 文档
• Vite 文档

Happy Coding! 🚀