guoran-cli

果然世界前端脚手架，基于 Vue3 + TypeScript + Vite 构建，提供完整的项目初始化方案。

✨ 功能特性

核心技术栈

• 📦 Vue 3 - 渐进式 JavaScript 框架
• 🎯 TypeScript - 类型安全的 JavaScript 超集
• ⚡ Vite - 下一代前端构建工具
• 🛣️ Vue Router - 官方路由管理器（默认集成）
• 🍍 Pinia - 轻量级状态管理（默认集成）

UI 框架支持

• 🎨 Element Plus - 企业级 UI 组件库
• 🐜 Ant Design Vue - 蚂蚁金服 UI 组件库
• 📱 自定义组件 - 支持自定义组件开发

开发工具

• 🎭 ESLint + Prettier - 代码规范与格式化
• 🎨 Stylelint - CSS 代码规范
• 🧪 Vitest - 单元测试框架
• 🚀 Husky + Lint-staged - Git 钩子与提交前检查
• 📝 Commitlint + Commitizen - 规范化提交信息

开发体验

• 🔧 组件自动导入 - 无需手动导入组件
• 📊 环境变量管理 - 多环境配置支持
• 🔍 路径别名 - 简化导入路径
• ⚡ 热更新 - 快速开发体验
• 📦 自动初始化 Git - 自动创建 Git 仓库

CSS 支持

• 💅 Sass - CSS 预处理器
• 🎨 Less - CSS 预处理器
• 📝 CSS - 原生 CSS

🚀 快速开始

1. 全局安装

npm install -g guoran-cli

2. 创建项目

guoran-cli create project-name

3. 交互式配置

根据提示选择项目配置：

? Project description: 项目描述
? Author: 作者信息
? Choose UI framework: Element Plus / Ant Design Vue / None
? Choose CSS preprocessor: Sass / Less / CSS
? Add Axios? Yes / No
? Add ESLint + Prettier? Yes / No
? Add Vitest? Yes / No

4. 安装依赖

cd project-name
npm install

5. 启动开发服务器

npm run dev

📝 命令说明

开发命令

| 命令 | 说明 | | --- | --- | | npm run dev | 启动开发服务器 | | npm run build | 构建生产版本 | | npm run preview | 预览生产构建 | | npm run lint | 代码规范检查 | | npm run lint:css | CSS 规范检查 | | npm run test | 运行单元测试 | | npm run commit | 使用 Commitizen 提交代码 |

CLI 命令

| 命令 | 说明 | | --- | --- | | guoran-cli create <name> | 创建新的项目 | | guoran-cli --version | 查看 CLI 版本 | | guoran-cli --help | 查看帮助信息 |

📁 项目结构

project-name/
├── src/
│   ├── assets/          # 静态资源
│   │   └── styles/      # 样式文件
│   ├── components/      # 组件目录（自动注册）
│   ├── router/          # 路由配置
│   ├── stores/          # 状态管理
│   ├── utils/           # 工具函数
│   ├── views/           # 页面组件
│   ├── App.vue          # 根组件
│   └── main.ts          # 入口文件
├── .env                 # 环境变量配置
├── .eslintrc.cjs        # ESLint 配置
├── .gitignore           # Git 忽略文件
├── .prettierrc          # Prettier 配置
├── .stylelintrc.json    # Stylelint 配置
├── .commitlintrc.cjs    # Commitlint 配置
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── tsconfig.json        # TypeScript 配置
├── vite.config.ts       # Vite 配置
└── README.md            # 项目说明

🛠️ 配置选项

环境变量

在 .env 文件中配置环境变量：

# 基础 URL
VITE_API_BASE_URL=http://localhost:3001/api

# 应用名称
VITE_APP_NAME=Vue3 + Vite + TS

Vite 配置

在 vite.config.ts 中配置 Vite：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入插件配置
    AutoImport({
      // 配置项...
    }),
    // 组件自动注册配置
    Components({
      // 配置项...
    })
  ],
  // 其他配置...
})

ESLint 配置

在 .eslintrc.cjs 中配置 ESLint 规则：

module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'prettier'
  ],
  rules: {
    // 自定义规则...
  }
}

🎨 技术栈

| 类别 | 技术 | 版本 | | --- | --- | --- | | 核心框架 | Vue 3 | ^3.5.13 | | 开发语言 | TypeScript | ~5.6.2 | | 构建工具 | Vite | ^6.0.5 | | 路由管理 | Vue Router | ^4.4.0 | | 状态管理 | Pinia | ^2.2.0 | | UI 框架 | Element Plus / Ant Design Vue | ^2.8.4 / ^4.2.3 | | HTTP 请求 | Axios | ^1.7.2 | | 代码规范 | ESLint + Prettier | ^9.8.0 + ^3.3.3 | | CSS 规范 | Stylelint | ^16.9.0 | | 测试工具 | Vitest | ^2.0.3 |

🔧 自定义配置

组件自动注册

在 vite.config.ts 中配置自动注册规则：

Components({
  resolvers: [
    ElementPlusResolver(),
    AntDesignVueResolver()
  ],
  include: [/\.vue$/, /\.vue\?vue/],
  dts: './src/components.d.ts',
  dirs: ['src/components']
})

自动导入配置

AutoImport({
  resolvers: [
    ElementPlusResolver(),
    AntDesignVueResolver()
  ],
  imports: ['vue', 'vue-router', 'pinia'],
  dts: './src/auto-imports.d.ts'
})

🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支：git checkout -b feature/AmazingFeature
3. 提交更改：git commit -m 'feat: 添加了一个惊人的功能'
4. 推送到分支：git push origin feature/AmazingFeature
5. 提交 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

📊 更新日志

v1.0.0 (2025-12-18)

• ✨ 初始版本发布
• 🎯 支持 Vue3 + TypeScript + Vite
• 🛣️ 默认集成 Vue Router 和 Pinia
• 🎨 支持 Element Plus 和 Ant Design Vue
• 🔧 集成 ESLint + Prettier + Stylelint
• 🚀 支持自动初始化 Git 仓库
• 📝 自动生成 README.md 文档
• 💅 支持 Sass 和 Less
• 🔍 支持环境变量管理
• 📦 支持组件自动导入

果然世界前端团队 | Made with ❤️