Skip to content

一、 核心原理:CLI 是什么?

通俗地说,CLI (Command Line Interface) 本质上就是一个 Node.js 脚本

当你运行 vue create my-project 时,操作系统其实是在运行 node vue-cli-script.js。这就好比你平时写业务代码是给浏览器看,而写 CLI 是给操作系统看。

核心流程通常只有三步:

  1. 问: 通过命令行询问用户(项目名是什么?用 Vue 还是 React?要不要 TypeScript?)。
  2. 拿: 根据用户的回答,去远程仓库(如 GitHub/GitLab)下载对应的模板代码。
  3. 改: 下载完后,根据用户的输入(如项目名)修改 package.json 等文件,然后安装依赖。

CLI 全家桶

二、 最佳实践目录结构 (Directory Structure)

建议将项目以下结构:

示例项目

binw-cli
├── bin/
│   └── index.js          # 【入口文件】只做两件事:检查Node版本、引入core
├── lib/
│   ├── core/             # 【核心机制】
│   │   ├── action.js     # 命令注册中心
│   │   └── help.js       # 帮助信息管理
│   ├── commands/         # 【业务指令】每个命令一个文件,互不干扰
│   │   ├── create.js     # create 命令的具体逻辑
│   │   └── config.js     # config 命令的具体逻辑
│   ├── utils/            # 【工具库】
│   │   ├── log.js        # 统一日志打印封装(带颜色/图标)
│   │   ├── request.js    # 统一 HTTP 请求封装 (Axios/Fetch)
│   │   └── terminal.js   # 终端操作封装 (exec/spawn)
│   └── config/           # 【配置中心】
│       ├── repo-config.js # 远程模板地址映射
│       └── const.js      # 常量定义 (如版本号、文件名)
├── package.json
└── README.md