my-cli

一个基于 Node.js 的前端脚手架工具，帮助你快速生成 Vite 项目模板，并在已有项目中生成组件和页面骨架。

功能特点

• 支持创建 Vue3 + Vite 或 React + Vite 项目模板
• 支持在当前项目中生成组件代码
• 支持在当前项目中生成页面代码
• 会自动识别项目是 Vue 还是 React
• 支持通过配置文件自定义生成目录
• 支持使用 --force 覆盖已存在文件

支持的模板

• Vue3 + Vite
• React + Vite

安装方式

方式一：作为公开包使用（推荐给他人）

npm install -g @ljjjjjjj/my-cli

安装后可以直接使用：

my-cli --help

方式二：本地开发调试使用

npm install
npm link

然后就可以在当前环境中直接执行：

my-cli create your-project-name

命令说明

0. 查看帮助

my-cli help

或：

my-cli --help

会看到当前支持的命令：

my-cli create <项目名称>
my-cli add component <组件名称> [--force]
my-cli add page <页面名称> [--force]
my-cli help

1. 创建项目

my-cli create your-project-name

执行后会提示你：

• 选择项目模板
• 输入项目描述

创建成功后，会生成一个新的 Vite 项目目录。

2. 生成组件

在当前项目中执行：

my-cli add component Button

脚手架会先从当前目录向上查找 package.json，定位项目根目录；随后根据项目类型自动选择对应模板。

默认生成位置：

• Vue 项目：src/components/Button/
• React 项目：src/components/Button/

默认生成内容：

Vue 项目：

src/components/Button/
├── Button.vue
├── Button.module.scss
├── index.ts
├── README.md
└── Button.test.ts

React 项目：

src/components/Button/
├── Button.jsx
├── Button.module.css
├── index.js
├── README.md
└── Button.test.jsx

3. 生成页面

my-cli add page User

默认生成位置：

• Vue 项目：src/pages/User/
• React 项目：src/pages/User/

默认生成内容：

src/pages/User/
├── index.vue
├── style.scss
├── api.ts
├── hooks.ts
├── store.ts
└── types.ts

React 项目则会生成对应的 jsx 和 css 文件。

4. 覆盖已存在文件

如果目标文件已存在，默认会询问是否覆盖；如果你想直接覆盖，可以使用：

my-cli add component Button --force

或简写：

my-cli add page User -f

配置说明

脚手架会先从当前目录向上查找 package.json，定位项目根目录。

你可以在项目根目录创建 .my-cli.json 来指定生成目录和框架：

{
  "framework": "vue",
  "componentsDir": "src/components",
  "pagesDir": "src/pages"
}

也可以在 package.json 中配置：

{
  "myCli": {
    "framework": "react",
    "componentsDir": "src/components",
    "pagesDir": "src/pages"
  }
}

如果没有配置，脚手架会自动根据 package.json 或项目文件结构进行检测。

适用场景

这个脚手架适合用于：

• 快速初始化前端项目
• 在已有项目中快速生成组件和页面
• 作为学习和练习 CLI 工具的示例项目

说明

如果你希望把这个脚手架给他人使用，请直接使用发布到 npm 的包名进行安装。