搭建属于自己的Vue3脚手架

脚手架是啥

相信大家都用过vue-cli，我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpack project-name 就能初始化好一个自己的项目。
我们来写一个简易版的脚手架 lizhi-cli（名字爱取啥取啥），目标是实现一个 lizhi init template-name project-name 这样的命令，废话少说，开始进入正题吧🚀🚀🚀。

前置知识

commander

这是用来编写指令和处理命令行的，具体用法如下：

const program = require("commander");
// 定义指令
program
  .version('0.0.1')
  .command('init', 'Generate a new project from a template')
  .action(() => {
   
    // 回调函数
  })
// 解析命令行参数
program.parse(process.argv);

inquirer

这是个强大的交互式命令行工具，具体用法如下：

const inquirer = require('inquirer');
inquirer
  .prompt([
    // 一些交互式的问题
  ])
  .then(answers => {
   
    // 回调函数，answers 就是用户输入的内容，是个对象
  });

想象一下我们用 vue init webpack project-name 之后是不是会有几个交互问题，问你文件名啊、作者啊、描述啊、要不要用 eslint 啊等等之类的，就是用这个来写的。

chalk

这是用来修改控制台输出内容样式的，比如颜色啊，具体用法如下：

const chalk = require('chalk');
console.log(chalk.green('success'));
console.log(chalk.red('error'));

ora

这是一个好看的加载，就是你下载的时候会有个转圈圈的那种效果，用法如下：

const ora = require('ora')
let spinner = ora('downloading template ...')
spinner.start()

download-git-repo

看名字很明显了，这是用来下载远程模板的，支持 GitHub、 GitLab 和 Bitbucket 等，用法如下：

const download = require('download-git-repo')
download(repository, destination, options, callback)

其中 repository 是远程仓库地址；destination 是存放下载的文件路径，也可以直接写文件名，默认就是当前目录；options 是一些选项，比如 { clone：boolean } 表示用 http download 还是 git clone 的形式下载。

注： 如果远程仓库非以上三类，则需自己重写download-git-repo中 index.js 的逻辑，并重新发布一个download-git-repo的npm包（当然包名可以换成你自己的），主要修改部分如下：

目录搭建

1. 首先创建一个项目，目录结构如下：
   
2. 执行 npm init 命令，生成 package.json：

{
   
  "name": "lizhi-vue3-cli",
  "version": "1.0.0",
  "description": "vue3+vite+navie/element-plus",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "lizhi": "bin/lizhi",
    "lizhi-add": "bin/lizhi-add",
    "lizhi-delete": "bin/lizhi-delete",
    "lizhi-list": "bin/lizhi-list",
    "lizhi-init": "bin/lizhi-init"