genius-cli

v0.0.3

Published

10 months ago

灵活配置的脚手架

0High
0Medium
0Low

wanglinglei

cli vue node

Genius CLI

🚀 一个灵活配置的 Vue3 项目脚手架工具

📖 项目简介

Genius CLI 是一个基于 Node.js 开发的命令行工具，专门用于快速创建和配置 Vue3 项目。它提供了交互式的项目配置体验，支持模板渲染和自动化项目初始化，让开发者能够快速启动新的 Vue3 项目。

✨ 核心特性

🎯 交互式配置：通过友好的命令行界面收集项目配置信息
🎨 模板渲染：基于 EJS 模板引擎，支持动态内容生成
📁 智能文件处理：递归遍历目录，自动识别并处理文本文件
🔧 CSS 预处理器支持：内置 Less、Sass、UnoCSS 选择
🛠️ 完整的 Vue3 生态：集成 Vue Router、Pinia、TypeScript 等
📦 版本管理：支持版本检查和自动更新
🎪 彩色日志：美观的命令行输出体验

🏗️ 项目架构

genius-cli/
├── src/                    # 源代码目录
│   ├── lib/               # 核心功能模块
│   │   ├── commandDispatch.ts    # 命令调度器
│   │   ├── coreRender.ts         # 核心渲染引擎
│   │   ├── getConfig.ts          # 配置收集器
│   │   └── constants.ts          # 常量定义
│   ├── types/             # TypeScript 类型定义
│   │   ├── command.ts            # 命令类型
│   │   ├── projectConfig.ts      # 项目配置类型
│   │   └── index.ts              # 类型导出
│   ├── utils/             # 工具函数
│   │   ├── log.ts               # 日志工具
│   │   └── index.ts             # 工具导出
│   └── main.ts            # 程序入口
├── vue3-template/         # Vue3 项目模板
└── dist/                  # 编译输出目录

🚀 快速开始

安装

# 全局安装
npm install -g genius-cli

# 或使用 yarn
yarn global add genius-cli

# 或使用 pnpm
pnpm add -g genius-cli

基本使用

1. 创建新项目

# 在当前目录创建项目
genius-cli

# 或者
npx genius-cli

运行后会启动交互式配置流程：

? 请输入项目名称 my-vue-app
? 请输入项目版本号 (0.0.1) 1.0.0
? 请输入项目描述 My awesome Vue3 application
? 请选择CSS预处理器 (Use arrow keys)
❯ less
  sass
  unocss

2. 查看版本信息

genius-cli --version
# 或
genius-cli -v

3. 更新到最新版本

genius-cli --update
# 或
genius-cli -u

4. 查看帮助信息

genius-cli --help
# 或
genius-cli -h

🎯 功能详解

核心渲染流程

配置收集：通过 inquirer 收集用户输入的项目配置
目录检查：验证目标目录是否存在，避免覆盖现有项目
模板复制：将 vue3-template 目录复制到目标位置
模板渲染：递归遍历所有文件，使用 EJS 渲染包含模板语法的文件
完成提示：显示项目创建成功信息

智能文件处理

文件类型识别：自动识别文本文件和二进制文件
模板语法检测：只对包含 EJS 语法（<% %>、<%= %>、<%- %>）的文件进行渲染
递归目录遍历：支持深层嵌套的目录结构
错误处理：完善的错误捕获和用户友好的错误提示

支持的文件类型

// 自动处理的文本文件类型
[
  ".txt",
  ".md",
  ".json",
  ".js",
  ".ts",
  ".jsx",
  ".tsx",
  ".vue",
  ".html",
  ".css",
  ".scss",
  ".sass",
  ".less",
  ".xml",
  ".yml",
  ".yaml",
  ".toml",
  ".ini",
  ".env",
  ".gitignore",
  ".gitattributes",
  ".editorconfig",
  ".eslintrc",
  ".prettierrc",
  ".babelrc",
  ".npmrc",
][
  // 特殊文件名
  ("Dockerfile", "Makefile", "README")
];

📝 模板配置

可用的模板变量

在模板文件中，你可以使用以下变量：

{
  projectName: "项目名称",
  version: "版本号",
  description: "项目描述",
  cssProcessor: "CSS预处理器 (less|sass|unocss)"
}

模板语法示例

// package.json 模板示例
{
  "name": "<%= projectName %>",
  "version": "<%= version %>",
  "description": "<%= description %>",
  "scripts": {
    "dev": "vite"
  }
}

<!-- Vue 组件模板示例 -->
<template>
  <div class="<%= cssProcessor %>-styled">
    <h1>Welcome to <%= projectName %>!</h1>
  </div>
</template>

🛠️ 开发指南

本地开发

# 克隆项目
git clone <repository-url>
cd genius-cli

# 安装依赖
npm install

# 开发模式运行
npm run dev

# 构建项目
npm run build

# 本地测试
npm run start

项目结构说明

CommandDispatch：处理命令行参数，支持版本查看、更新、帮助等功能
CoreRender：核心渲染引擎，负责模板复制和渲染
getConfig：交互式配置收集器，使用 inquirer 获取用户输入
Logger：彩色日志输出工具，基于 chalk 实现

添加新的模板变量

在 src/types/projectConfig.ts 中添加新的类型定义
在 src/lib/getConfig.ts 中添加新的 inquirer 问题
在模板文件中使用 <%= newVariable %> 语法

自定义模板

你可以修改 vue3-template 目录来自定义项目模板：

添加或修改模板文件
使用 EJS 语法插入动态内容
重新构建项目

📋 命令参考

| 命令 | 简写 | 描述 | | ------------ | ---- | -------------------- | | genius-cli | - | 创建新项目（交互式） | | --version | -v | 查看当前版本 | | --update | -u | 更新到最新版本 | | --help | -h | 显示帮助信息 |

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

Fork 本项目
创建特性分支：git checkout -b feature/amazing-feature
提交更改：git commit -m 'Add some amazing feature'
推送分支：git push origin feature/amazing-feature
提交 Pull Request

📄 许可证

本项目基于 ISC 许可证开源。

👨‍💻 作者

wanglinglei

⭐ 如果这个项目对你有帮助，请给它一个 Star！