如何生成属于自己的vue-cli

1. 准备项目

首先，确保您的项目结构和package.json文件已经准备好。

• 项目结构示例：

my-cli
├── bin
│   └── my-cli.js
├── lib
│   └── commands
│       └── create.js
├── templates
│   └── my-vue-template
│       ├── public
│       ├── src
│       ├── .gitignore
│       ├── package.json
│       └── README.md
├── package.json
└── README.md

各个文件和目录的作用

bin目录： 存放CLI的入口文件。

bin/my-cli.js： CLI的主入口文件，处理命令行输入和执行相应的操作。

lib目录： 存放CLI的业务逻辑代码。

lib/commands/create.js： 处理create命令的业务逻辑代码。

templates目录： 存放项目模板文件。

package.json： npm包的配置文件，包含项目的依赖、命令和其他元数据。

README.md： 项目的说明文档，解释如何使用您的CLI工具。

.gitignore： 指定要忽略的文件和目录，通常用于排除不需要上传到git仓库的文件，如node_modules。

• package.json示例：

{
   
  "name": "my-cli",
  "version": "1.0.0",
  "description": "My custom CLI tool for Vue projects",
  "main": "lib/index.js",
  "bin": {
   
    "my-cli": "./bin/my-cli.js"
  },
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
   
    "type": "git",
    "url": "git+https://github.com/username/my-cli.git"
  },
  "keywords": [
    "cli",
    "tool",
    "vue"
  ],
  "author": "Your Name",
  "license": "MIT",
  "bugs": {
   
    "url": "https://github.com/username/my-cli/issues"
  },
  "homepage": "https://github.com/username/my-cli#readme",
  "dependencies": {
   
    "commander": "^8.0.0",
    "ejs": "^3.1.6",
    "fs-extra": "^10.0.0"
  }
}

2. 创建命令行入口文件

创建一个bin/my-cli.js文件，用于处理CLI命令。

• bin/my-cli.js示例：

#!/usr/bin/env node

const {
    program } = require('commander');
const create = require('../lib/commands/create');

program
  .version('1.0.0')
  .command('create <project-name>')
  .description('create a new Vue project')
  .action((projectName) => {
   
    create(projectName);
  });

program.parse(process.argv);

3. 创建命令处理文件

创建一个处理命令的文件，例如lib/commands/create.js。

• lib/commands/create.js示例：

const fs = require('fs-extra');
const path = require('path');

module.exports = async (projectName) => {
   
  const projectPath = path.join(process.cwd(), projectName);
  if (fs.existsSync(projectPath)) {
   
    console.error(`Project ${
     projectName} already exists`);
    process.exit(1);
  }
  
  const templatePath = path.join(__dirname, '../../templates/my-vue-template');
  
  try {
   
    await fs.copy(templatePath, projectPath);
    console.log(`Project ${
     projectName} created at ${
     projectPath}`);
    console.log('Run the following commands to get started:');
    console.log(`cd ${
     projectName}`);
    console.log('npm install');
    console.log('npm run serve');
  } catch (err) {
   
    console.error(err);
  }
};

4. 添加执行权限

chmod +x bin/my-cli.js

5. 登录npm

在终端中登录到npm：

npm login

6. 发布包到npm

将包发布到npm：

npm publish

7. 全局安装和测试

npm install -g my-cli
my-cli create my-project

8.create项目自