一、 核心原理:CLI 是什么?
通俗地说,CLI (Command Line Interface) 本质上就是一个 Node.js 脚本。
当你运行 vue create my-project 时,操作系统其实是在运行 node vue-cli-script.js。这就好比你平时写业务代码是给浏览器看,而写 CLI 是给操作系统看。
核心流程通常只有三步:
- 问: 通过命令行询问用户(项目名是什么?用 Vue 还是 React?要不要 TypeScript?)。
- 拿: 根据用户的回答,去远程仓库(如 GitHub/GitLab)下载对应的模板代码。
- 改: 下载完后,根据用户的输入(如项目名)修改
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