当前位置:网站首页>脚手架开发基础
脚手架开发基础
2022-07-05 10:21:00 【码小龙.】
基础
目标
v create demo
插件介绍
commander
文档地址
说明:命令行插件
使用方法:
const { program } = require(‘commander’)
program.version(‘0.0.1’)
program.option(“-n “, “输出名称”)
// 参数一定要使用<>的形式包裹起来
program.option(”-t --type ”, “项目类型”)
// 输出options
// const options = program.opts()
// console.log(“opts=>”, options)
program.opts()
program
// 命令
.command(“create ”)
// 描述
.description(“创建一个标准的Vue项目”)
// 行为
.action(name => {
console.log(“正在创建Vue项目,名称为:” + name)
})
// 必须要通过parse的方式解析一下才可以, 需要放在最后
program.parse(process.argv)
figlet
文档地址
说明:大型字符-终端打印大型文字
使用方法:
// callback形式
const figlet = require(“figlet”)
figlet(‘Hello World!!’, function (err, data) {
if (err) {
console.log(‘Something went wrong…’)
console.dir(err)
return
}
console.log(data)
});
// async形式
let { promisify } = require(“util”)
let figlet = require(“figlet”)
let asyncFiglet = promisify(require(“figlet”))
async function run() {
try {
let data = await asyncFiglet(“Vue 3”)
console.log(data)
} catch (error) {
console.log(error)
}
}
run()
inquirer
文档地址
说明:命令行参数输入交互
使用方法:
let inquirer = require(“inquirer”)
// prompt接受一个数组, 可以询问多个
inquirer.prompt([
{
name: “userName”,// 打印的文字
type: “input”, // type的类型有很多 list, input, checkbox…
message: “你的名字叫什么?” // 选项
},
{
name: “age”,
type: “checkbox”,
message: “你多大了?”,
choices: [“20-25”, “25-30”, “30-40”, “40以上”]
}
]).then(answer => {
console.log(“回答内容:”, answer)
}).catch((error) => {
if (error.isTryError) { } else { }
})
chalk
文档地址
说明:彩色文字-美化终端字符显示
使用方法:
let chalk = require(“chalk”)
const log = console.log
log(chalk.blue(‘hello’) + ’ world’ + chalk.red(‘!’))
ora
文档地址
说明:loading效果
使用方法:
const ora = require(‘ora’)
const spinner = ora(‘Loading unicorns’).start()
setTimeout(() => {
spinner.color = ‘yellow’
spinner.text = ‘Loading rainbows’
setTimeout(() => {
spinner.stop()
}, 1000)
}, 2000)
download-git-repo
文档地址
说明:仓库下载
使用方法:
let download = require(“download-git-repo”)
// direct:git地址, demo1表示放在哪个
download(‘direct:https://xxx.git’, ‘Demo1’, { clone: true }, function (err) {
console.log(err ? ‘Error’ : ‘Success’)
})
脚手架开发流程
创建空项目/文件夹
通过npm/yarn初始化package文件
npm init
yarn init
安装插件
npm install commander figlet inquirer chalk ora download-git-repo -S
yarn add commander figlet inquirer chalk ora download-git-repo -S
创建bin目录
|-bin
|–index.js
|–init.js
package.json
开发命令行
/**
- 开发后台脚手架,快速生成标准Vue后台架构
*/
let program = require(“commander”)
let { promisify } = require(‘util’)
let asyncFiglet = promisify(require(“figlet”))
let chalk = require(“chalk”)
let inquirer = require(“inquirer”)
let init = require(“./init”)
// 日志打印函数
const log = content => console.log(chalk.yellow(content))
// 设置版本和参数
program.version(“1.0.0”);
program.option(“-n --name ”, “output name”);
// 打印LOGO
async function printLogo() {
let data = await asyncFiglet(“v-cli”);
log(data);
}
program
.command(“create ”)
.description(“创建Vue项目”)
.action(async (name) => {
await printLogo()
log(“准备创建项目…”)
let answer = await inquirer.prompt([
{
name: “language”,
type: “list”,
message: “请选择语言版本”,
choices: [“Javascript”, “Typescript”]
}
])
if (answer.language == “Javascript”) {
// 下载框架
log(“您选择了Javascript版本,即将进入下载模式.”)
init(name);
} else {
log(“敬请期待!!!”)
}
})
// 参数解析
program.parse(process.argv)
// init.js
/**
- 项目克隆
*/
let { promisify } = require(‘util’)
const ora = require(“ora”)
const download = promisify(require(“download-git-repo”))
const shell = require(“shelljs”)
let chalk = require(“chalk”)
// 日志打印函数
const log = content => console.log(chalk.yellow(content))
module.exports = async (appName) => {
log( 创建项目 ${appName}
)
shell.rm(“-rf”, appName);
const spinner = ora(“下载中…”).start();
try {
await download(“direct:https://xxx.git”, appName, { clone: true })
spinner.succeed(“下载完成”)
log(`
下载完成,请执行下面命令启动项目:
cd ${appName}
yarn 或者 npm init
npm run dev
或者
yarn dev
) } catch (error) { log(
下载失败`, error)
spinner.stop();
}
}
边栏推荐
- How do programmers live as they like?
- 横向滚动的RecycleView一屏显示五个半,低于五个平均分布
- Node の MongoDB Driver
- Redis如何实现多可用区?
- 九度 1480:最大上升子序列和(动态规划思想求最值)
- flink cdc不能监听mysql日志,大家遇到过这个问题吧?
- LiveData 面试题库、解答---LiveData 面试 7 连问~
- Who is the "conscience" domestic brand?
- > Could not create task ‘:app:MyTest. main()‘. > SourceSet with name ‘main‘ not found. Problem repair
- 伪类元素--before和after
猜你喜欢
> Could not create task ‘:app:MyTest.main()‘. > SourceSet with name ‘main‘ not found.问题修复
2022年危险化学品生产单位安全生产管理人员特种作业证考试题库模拟考试平台操作
如何判断线程池已经执行完所有任务了?
【DNS】“Can‘t resolve host“ as non-root user, but works fine as root
非技术部门,如何参与 DevOps?
【js学习笔记五十四】BFC方式
Workmanager learning 1
非技術部門,如何參與 DevOps?
Events and bubbles in the applet of "wechat applet - Basics"
伪类元素--before和after
随机推荐
【JS】提取字符串中的分数,汇总后算出平均分,并与每个分数比较,输出
AD20 制作 Logo
Shortcut keys for vscode
Activity jump encapsulation
Learning II of workmanager
ModuleNotFoundError: No module named ‘scrapy‘ 终极解决方式
Glide advanced level
Learning notes 5 - high precision map solution
2022鹏城杯web
Uni app running to wechat development tool cannot Preview
How to judge that the thread pool has completed all tasks?
Blockbuster: the domestic IDE is released, developed by Alibaba, and is completely open source!
ConstraintLayout官方提供圆角ImageFilterView
Workmanager Learning one
Customize the left sliding button in the line in the applet, which is similar to the QQ and Wx message interface
到底谁才是“良心”国产品牌?
uniapp + uniCloud+unipay 实现微信小程序支付功能
> Could not create task ‘:app:MyTest.main()‘. > SourceSet with name ‘main‘ not found.问题修复
Pseudo class elements -- before and after
Have the bosses ever encountered such problems in the implementation of flinksql by Flink CDC mongdb?