搭建一个vue3+ts+vite的脚手架由于经常使用vue3+elementPlus+vite搭建项目，所以干脆把基础模

一、创建git仓库

1.先创建一个git仓库，这里选的是gitee,github国内访问太慢,创建仓库名为create-dlx-template,命名随便。

2.本地创建一个文件夹，create-dlx-template

3.在文件夹执行pnpm init ,初始化项目，把main:index.js改成bin:index.js，注意package.json的name就是我们最后要发布的脚手架名称，发布到npm之后，执行npx create-dlx-template即可拉取模板，create-dlx-template换成你自己的。

4.新建index.js, 代码如下:

#! /usr/bin/env node

5.提交代码到git仓库

二、使用 command-line-args 处理用户输入命令

pnpm add command-line-args

根目录下新建一个 cli.js 用于处理我们脚手架的逻辑,这里简单写一个-v 版本命令

// cli.js
import commandLineArgs from "command-line-args";
import { readFile } from "fs/promises";

const pkg = JSON.parse(
  await readFile(new URL("./package.json", import.meta.url))
);
//配置命令参数
const optionDefinitions = [{ name: "version", alias: "v", type: Boolean }];
const options = commandLineArgs(optionDefinitions);
if (options.version) {
  console.log(`v${pkg.version}`);
}

在终端执行node index.js -v,打印出版本号

我们还可以使用command-line-usage 插件让它为我们提供帮助命令,实现xxx -h帮助功能。

pnpm add command-line-usage

部分代码如下：

// cli.js
import commandLineArgs from "command-line-args"
import commandLineUsage from "command-line-usage"

//帮助命令
const helpSections = [
  {
    header: 'create-dlx-template',
    content: '一个快速 搭建vue3+vite+ts 项目的脚手架',
  },
  {
    header: 'Options',
    optionList: [
      {
        name: 'version',
        alias: 'v',
        typeLabel: '{underline boolean}',
        description: '版本号',
      },
      {
        name: 'help',
        alias: 'h',
        typeLabel: '{underline boolean}',
        description: '帮助',
      }
    ],
  },
];


if (options.help) {
  console.log(commandLineUsage(helpSections))
  return
}

终端输入node index.js -h，打印如下：

三、交互式命令

当我们使用一些脚手架的时候,比如 npm create vite,它会让我们一些选项让我们选择

prompts 插件

pnpm add prompts

然后再cli.js中，写下代码：

import commandLineArgs from 'command-line-args'
import commandLineUsage from 'command-line-usage'
import prompts from 'prompts'

...其他代码如上文

const promptsOptions = [
  {
    type: 'text',
    name: 'name',
    message: '请输入项目名称',
  },
  {
    type: 'select', //单选
    name: 'template',
    message: '请选择一个模板',
    choices: [
      { title: 'element-plus', value: 1 },
      { title: 'dlx-cli', value: 2 },
    ],
  },
]

const getUserInfo = async () => {
    const res = await prompts(promptsOptions); 
    console.log(res); 
};
    getUserInfo();

命令行输入node index.js,会让你选择模板

下载模板

拉取远程仓库我们可以使用 download-git-repo 工具,然后使用它的 clone 方法,同时我们需要安装一个 loading 插件 ora 以及 log 颜色插件 chalk

pnpm add download-git-repo ora chalk

在utils下新建gitClone.js

// gitClone.js
import download from 'download-git-repo'
import chalk from 'chalk'
import ora from 'ora'

export default (remote, name, option) => {
  const downSpinner = ora('正在下载模板...').start()
  return new Promise((resolve, reject) => {
    download(remote, name, option, (err) => {
      if (err) {
        downSpinner.fail()
        console.log('err', chalk.red(err))
        reject(err)
        return
      }
      downSpinner.succeed(chalk.green('模板下载成功！'))
      console.log(chalk.green(`cd ${name}\r\n`))
      console.log(chalk.blue('pnpm install\r\n'))
      console.log('pnpm run dev\r\n')
      console.log('pnpm run build\r\n')

      resolve()
    })
  })
}

修改cli.js

//  cli.js
import gitClone from './utils/gitClone.js'
...
// git仓库可以写自己的，也可以是任何一个可访问git仓库
const remoteList = {
  1: 'https://gitee.com/chen_pengchao/vue3-ts-elementplus.git',
  2: 'https://gitee.com/chen_pengchao/create-dlx-template.git',
}
const getUserInfo = async () => {
  const res = await prompts(promptsOptions)
  if (!res.name || !res.template) return
  gitClone(`direct:${remoteList[res.template]}`, res.name, { clone: true })
}

getUserInfo()

完整版cli.js

import commandLineArgs from 'command-line-args'
import commandLineUsage from 'command-line-usage'
import gitClone from './utils/gitClone.js'
import prompts from 'prompts'
import { readFile } from 'fs/promises'

const pkg = JSON.parse(
  await readFile(new URL('./package.json', import.meta.url))
)
//配置命令参数
const optionDefinitions = [
  { name: 'version', alias: 'v', type: Boolean },
  { name: 'help', alias: 'h', type: Boolean },
]

//帮助命令
const helpSections = [
  {
    header: 'create-dlx-template',
    content: '一个快速 搭建vue3+vite+ts 项目的脚手架',
  },
  {
    header: 'Options',
    optionList: [
      {
        name: 'version',
        alias: 'v',
        typeLabel: '{underline boolean}',
        description: '版本号',
      },
      {
        name: 'help',
        alias: 'h',
        typeLabel: '{underline boolean}',
        description: '帮助',
      },
    ],
  },
]
const promptsOptions = [
  {
    type: 'text',
    name: 'name',
    message: '请输入项目名称',
  },
  {
    type: 'select', //单选
    name: 'template',
    message: '请选择一个模板',
    choices: [
      { title: 'element-plus', value: 1 },
      { title: 'dlx-cli', value: 2 },
    ],
  },
]
const options = commandLineArgs(optionDefinitions)

const remoteList = {
  1: 'https://gitee.com/chen_pengchao/vue3-ts-elementplus.git',
  2: 'https://gitee.com/chen_pengchao/create-dlx-template.git',
}
const getUserInfo = async () => {
  const res = await prompts(promptsOptions)
  if (!res.name || !res.template) return
  gitClone(`direct:${remoteList[res.template]}`, res.name, { clone: true })
}
const runOptions = () => {
  if (options.version) {
    console.log(`v${pkg.version}`)
    return
  }
  if (options.help) {
    console.log(commandLineUsage(helpSections))
    return
  }
  getUserInfo()
}

runOptions()

发布脚手架

在终端输入npm login,进行登录，没有npm账号的先去npm官网注册账号，输入npm login之后可能会有报错，Unexpected token < in JSON at position 0 while parsing near '<!DOCTYPE HTML PUBLI...'，这时候检查你的node.js版本，我这里用的v14版本会报错，升级到v16之后就可以了。这时候继续知名npm login 会报下面这个错<https://registry.npmmirror.com/-/user/org.couchdb.user:chen_pengchao> - [FORBIDDEN] Public registration is not allowed

这时候还需要指回默认的官方注册服务器:执行以下命令： npm config set registry https://registry.npmjs.org/ 然后再尝试注册没有任何问题了。输入账号密码之后，还让你输入邮箱，会给你邮箱发一个验证码，输入验证码之后，执行npm publish就能发布到npm了。

使用

我们在终端执行npx create-dlx-template即可。create-dlx-template就是你发布的脚手架名称，就是package.json里面的name值

源码地址

搭建一个vue3+ts+vite的脚手架