自由搭建脚手架第二弹，自定义命令，轻松管理项目

重新构建脚手架

在搭建基础脚手架后，我们开始构建脚手架命令行内容。此部分主要负责通过命令去初始化项目等等操作。同时我们将对脚手架项目进行优化，让脚手架项目更加灵活。

优化主要分为两部分：

1. 脚手架将不再使用Webpack进行打包，而是改为更轻量化的Vite进行打包，Vite同时支持Vue3。

2. 对创建好的项目结构进行优化。

使用Vite打包

pnpm add --dev @vitejs/plugin-vue vite

修改package.json：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

对创建的项目结构优化：

|-node_modules
|-public
|---index.html
|-src
|---components
|---App.vue
|-main.js
|-package.json
|-vite.config.js

至此，我们就完成了脚手架的优化，接下来，让我们开始构建脚手架的命令行功能。

命令行功能

首先，我们要在项目根目录下创建命令行文件夹：

|-cli

然后，我们在命令行文件夹里创建index.js文件：

const program = require('commander');
const chalk = require('chalk');
const { execSync } = require('child_process');

program
  .version('0.0.1')
  .description('A simple CLI for initializing a Vue project')
  .option('-p, --project <project-name>', 'The name of the project to be initialized')
  .action((options) => {
    const projectName = options.project;
    if (!projectName) {
      console.log(chalk.red('You must specify a project name'));
      process.exit(1);
    }
    try {
      execSync(`pnpm create @chuhc/scripts ${projectName}`);
      console.log(chalk.green(`Project ${projectName} created successfully`));
    } catch (error) {
      console.log(chalk.red('Error creating project', error));
      process.exit(1);
    }
  })
  .parse(process.argv);

现在，我们就可以使用脚手架的命令行了。我们可以通过以下命令来初始化一个新的项目：

pnpm i -g @chuhc/cli
chuhc init my-project

总结

在本文中，我们通过剖析 @vue/cli 源码，并借鉴其部分功能，对脚手架进行了修改，最终实现了自定义命令，轻松管理项目的目标。

我们首先对脚手架项目进行了优化，使其更加轻量化和灵活。然后，我们构建了脚手架的命令行功能，使我们可以通过命令来初始化项目。最后，我们总结了整个脚手架的搭建过程，并对脚手架的后续开发方向进行了展望。

我希望这篇文章能对您有所帮助。如果您有任何问题或建议，请随时与我联系。