自定义脚手架工具

测试通过命令行模拟@vue/cli脚手架工具创建项目
参考文献：https://blog.csdn.net/wanghe1111_/article/details/122890041
https://blog.csdn.net/weixin_39085822/article/details/112160674

实现之前，首先这里要注意有关源的切换，先普及一下
切换为可登陆npm的源
npm config set registry https://registry.npmjs.org/
npm login
npm publish

有关模拟vue-cli脚手架工具原理分析
个人认为，可以这样理解，vue-cli也是进行全局下载了依赖之后，执行相关命令行，通过node模块进行操作，这里有关@vue/cli的构建命令如下：
npm install -g @vue/cli
vue create my-project // 创建项目名之后进行各种配置的选择
然后我们就获得了一个基础的vue/cli的模块

有关自定义实现方式
通过执行以下命令来安装此myVue脚手架：
1、创建index.js(用于执行)，packjson(相关依赖)，以及template.js(用于存放相关模板以及执行)
使用一下源码最后可以使用功能的相关命令行如下
fyhcli // 查看所有命令
fyhcli -V // 查看版本
fyhcli -list // 查看所有模板
fyhcli init ‘模板名称’ ‘项目名称’ // 创建一个对应模板的项目

index.js相关源码
#!/usr/bin/env node
// 命令行工具
const program = require(‘commander’)
// 快速克隆指定版本的仓库
const download = require(‘download-git-repo’)
// 模板引擎工具
const handlebars = require(‘handlebars’)
// 向导的方式采集用户输入的值
const inquirer = require(‘inquirer’)
// 文件读取和写入
const fs = require(‘fs’)
// loading工具
const ora = require(‘ora’)
// 显示样式
const chalk = require(‘chalk’)
// 显示图标
const logSymbols = require(‘log-symbols’)
// 模板列表文件,用于查询当前脚手架有什么模板的项目
const templates = require(‘./templates’)
program
.version(‘0.1.0’) // -v 或者 --version 的时候会输出该版本号
program
.command(‘init [project-name]’)
.description(‘初始化项目模板’)
.action((templateName, projectName) => {
console.log(“当前选择模板” + templateName, “写入项目名称” + projectName)
// loading 提示
const spinner = ora(‘正在下载模板…’).start()
// download
// 第一个参数：仓库地址
// 第二个参数：下载路径
const { downloadUrl } = templates[templateName]
console.log(‘正在从该仓库进行下载：’ + downloadUrl)
download(downloadUrl, projectName, { clone: true }, (err) => {
if (err) {
spinner.fail()
console.log(logSymbols.error, chalk.red(err))
return
}

        spinner.succeed()

        // 使用向导的方式采集用户输入的值
        inquirer.prompt([{
            type: 'input',
            name: 'name',
            message: '请输入项目名称',
            default: projectName
        }, {
            type: 'input',
            name: 'description',
            message: '请输入项目简介'
        }, {
            type: 'input',
            name: 'author',
            message: '请输入作者名称'
        }]).then((answers) => {
            // 把项目下的 package.json 文件读取出来
            const packagePath = `${projectName}/package.json`
            const packageContent = fs.readFileSync(packagePath, 'utf8')

            // 使用模板引擎把用户输入的数据解析到 package.json 文件中
            const packageResult = handlebars.compile(packageContent)(answers)

            // 解析完毕，把解析之后的结果重新写入 package.json 文件中
            fs.writeFileSync(packagePath, packageResult)

            console.log(logSymbols.success, chalk.yellow('初始化模板成功'))
        })
    })
})

program
.command(‘list’)
.description(‘查看所有可用模板’)
.action(() => {
for (let key in templates) {
console.log( ${key} ${templates[key].description})
}
})
// 没有任何命令的时候输出使用帮助
if (!process.argv.slice(2).length) {
program.outputHelp()
}
program.parse(process.argv)

packjson相关源码
{
“name”: “fyhcli”,
“version”: “1.0.0”,
“author”: “”,
“main”: “index.js”,
“bin”: {
“fyhcli”: “index.js” // 这里bin下面的fyhcli可以进行定义，通过fyhcli进行index.js的操作
},
“description”: “”,
“keywords”: [],
“license”: “ISC”,
“bundleDependencies”: false,
“dependencies”: {
“chalk”: “^2.4.1”,
“commander”: “^2.17.1”,
“download-git-repo”: “^1.1.0”,
“handlebars”: “^4.0.11”,
“inquirer”: “^6.1.0”,
“ora”: “^3.0.0”
},
“deprecated”: false,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
}
}

templates.js
/用于存放各类模板情况/
module.exports = {
‘tpl-p’: {
url: ‘github:qiulianying/fhv-ui’,
// downloadUrl作为通过download-git-rep进行下载的相关方式，进过测试可用
// 这里主要就是注意download-git-repo的写入规则，目前比较常用的clone方式可以通过这种方式写入，附带对应分支
downloadUrl: ‘https://github.com:qiulianying/fhv-ui#master’,
description: ‘系统平台模板’
},
‘tpl-u’: {
url: ‘https://github.com/lipengzhou/tpl-b’,
downloadUrl: ‘https://github.com:username/tpl-b#master’,
description: ‘uni-app模板’
}
}

基本上到此以及基础的下载脚手架工具的已经完成，后续主要是进行其他完善即可