completepage: 完成页面: 🍻 基本设计完成
This commit is contained in:
parent
da3cafc257
commit
9407d63be5
|
|
@ -1 +1,21 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
node_modules
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
// @see: https://www.prettier.cn
|
||||
|
||||
module.exports = {
|
||||
// 超过最大值换行
|
||||
printWidth: 130,
|
||||
// 缩进字节数
|
||||
tabWidth: 2,
|
||||
// 使用制表符而不是空格缩进行
|
||||
useTabs: true,
|
||||
// 结尾不用分号(true有，false没有)
|
||||
semi: true,
|
||||
// 使用单引号(true单引号，false双引号)
|
||||
singleQuote: true,
|
||||
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
|
||||
quoteProps: 'as-needed',
|
||||
// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
|
||||
bracketSpacing: true,
|
||||
// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
|
||||
trailingComma: 'all',
|
||||
// 在JSX中使用单引号而不是双引号
|
||||
jsxSingleQuote: true,
|
||||
// (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
|
||||
arrowParens: 'avoid',
|
||||
// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
|
||||
insertPragma: false,
|
||||
// 指定要使用的解析器，不需要写文件开头的 @prettier
|
||||
requirePragma: false,
|
||||
// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
|
||||
proseWrap: 'preserve',
|
||||
// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
|
||||
htmlWhitespaceSensitivity: 'css',
|
||||
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
|
||||
endOfLine: 'auto',
|
||||
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
|
||||
rangeStart: 0,
|
||||
rangeEnd: Infinity,
|
||||
|
||||
vueIndentScriptAndStyle: false, // Vue文件脚本和样式标签缩进
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
const { program } = require('commander'); // 命令行提示工具
|
||||
const figlet = require('figlet'); // 生成艺术字
|
||||
|
||||
module.exports = {
|
||||
/**
|
||||
* 给help信息添加提示
|
||||
*/
|
||||
CommandLogHelp() {
|
||||
program.on('--help', function () {
|
||||
console.log(
|
||||
// 设置帮助信息下打印艺术字
|
||||
figlet.textSync('Bunny-Cli', {
|
||||
font: 'Ghost',
|
||||
horizontalLayout: 'default',
|
||||
verticalLayout: 'default',
|
||||
width: 100,
|
||||
whitespaceBreak: true,
|
||||
}),
|
||||
);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 给出version版本号
|
||||
*/
|
||||
CommandLogStart() {
|
||||
program.name('bunny-cli').usage('<command> [options]');
|
||||
program.version(`😉 v${require('../package.json').version}`);
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
// 选择框架和语言
|
||||
const frame = [
|
||||
{
|
||||
type: 'list',
|
||||
message: '选择什么框架去新建项目❓',
|
||||
name: 'type',
|
||||
choices: [
|
||||
{ name: 'react', value: 'react' },
|
||||
{ name: 'vue', value: 'vue' },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'list',
|
||||
message: '是否使用TypeScript❓',
|
||||
name: 'isTypeScript',
|
||||
choices: [
|
||||
{ name: '是', value: 'ts' },
|
||||
{ name: '否', value: 'js' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// react框架
|
||||
const react = [
|
||||
{
|
||||
type: 'list',
|
||||
message: '📢react默认包含redux/toolkit;🚶选择路由创建位置',
|
||||
name: 'router',
|
||||
choices: [
|
||||
{ name: '使用RouterProvider', value: 'RouterProvider' },
|
||||
{ name: '使用userouter', value: 'userouter' },
|
||||
{ name: '不使用路由', value: '' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// vue
|
||||
const vue = [
|
||||
{
|
||||
type: 'list',
|
||||
message: '🚶选择vue仓库',
|
||||
name: 'router',
|
||||
choices: [
|
||||
{ name: 'pina', value: 'pina' },
|
||||
{ name: 'vuex', value: 'vuex' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 项目地址链接
|
||||
module.exports = {
|
||||
// 项目列表
|
||||
projectList: {
|
||||
'vue&js&vuex': '1',
|
||||
'vue&js&pina': '2',
|
||||
'vue&ts&vuex': '3',
|
||||
'vue&ts&pina': '4',
|
||||
'react&js&': '5',
|
||||
'react&ts&': '6',
|
||||
'react&js&userouter': '7',
|
||||
'react&ts&userouter': '8',
|
||||
'react&js&RouterProvider': '9',
|
||||
'react&ts&RouterProvider': '10',
|
||||
},
|
||||
// 问题
|
||||
question: { frame, react, vue },
|
||||
};
|
||||
132
bin/demo.js
132
bin/demo.js
|
|
@ -1,95 +1,95 @@
|
|||
#!/usr/bin/env node
|
||||
const { program } = require("commander"); // 命令行提示工具
|
||||
const chalk = require("chalk"); // 终端输出颜色变化
|
||||
const inquirer = require("inquirer"); // 交互选项
|
||||
const ora = require("ora"); // loading效果
|
||||
const spinner = ora("Loading unicorns").start(); // 注意要使用x几版本因为不支持
|
||||
const figlet = require("figlet"); // 生成艺术字
|
||||
const { program } = require('commander'); // 命令行提示工具
|
||||
const chalk = require('chalk'); // 终端输出颜色变化
|
||||
const inquirer = require('inquirer'); // 交互选项
|
||||
const ora = require('ora'); // loading效果
|
||||
const spinner = ora('Loading unicorns').start(); // 注意要使用x几版本因为不支持
|
||||
const figlet = require('figlet'); // 生成艺术字
|
||||
|
||||
figlet("Hello World!!", function (err, data) {
|
||||
if (err) {
|
||||
console.log("Something went wrong...");
|
||||
console.dir(err);
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
figlet('Hello World!!', function (err, data) {
|
||||
if (err) {
|
||||
console.log('Something went wrong...');
|
||||
console.dir(err);
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
});
|
||||
|
||||
figlet.text(
|
||||
"Boo!",
|
||||
{
|
||||
font: "Ghost",
|
||||
horizontalLayout: "default",
|
||||
verticalLayout: "default",
|
||||
width: 80,
|
||||
whitespaceBreak: true,
|
||||
},
|
||||
function (err, data) {
|
||||
if (err) {
|
||||
console.log("Something went wrong...");
|
||||
console.dir(err);
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
},
|
||||
'Boo!',
|
||||
{
|
||||
font: 'Ghost',
|
||||
horizontalLayout: 'default',
|
||||
verticalLayout: 'default',
|
||||
width: 80,
|
||||
whitespaceBreak: true,
|
||||
},
|
||||
function (err, data) {
|
||||
if (err) {
|
||||
console.log('Something went wrong...');
|
||||
console.dir(err);
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
},
|
||||
);
|
||||
|
||||
console.log(
|
||||
figlet.textSync("Boo!", {
|
||||
font: "Ghost",
|
||||
horizontalLayout: "default",
|
||||
verticalLayout: "default",
|
||||
width: 80,
|
||||
whitespaceBreak: true,
|
||||
}),
|
||||
figlet.textSync('Boo!', {
|
||||
font: 'Ghost',
|
||||
horizontalLayout: 'default',
|
||||
verticalLayout: 'default',
|
||||
width: 80,
|
||||
whitespaceBreak: true,
|
||||
}),
|
||||
);
|
||||
|
||||
setTimeout(() => {
|
||||
spinner.color = "red";
|
||||
spinner.text = "网络较慢，请稍后...";
|
||||
spinner.color = 'red';
|
||||
spinner.text = '网络较慢，请稍后...';
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
spinner.succeed("下载成功！！！");
|
||||
spinner.succeed('下载成功！！！');
|
||||
}, 2000);
|
||||
|
||||
setTimeout(() => {
|
||||
spinner.fail("下载失败！！！");
|
||||
spinner.fail('下载失败！！！');
|
||||
}, 3000);
|
||||
|
||||
inquirer
|
||||
.prompt([
|
||||
/* Pass your questions in here */
|
||||
{ type: "input", name: "food", message: "你吃什么", default: "包子" },
|
||||
{ type: "input", name: "food", message: "吃辣吗？", default: "微辣" },
|
||||
])
|
||||
.then((answers) => {
|
||||
// Use user feedback for... whatever!!
|
||||
console.log(answers);
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.isTtyError) {
|
||||
// Prompt couldn't be rendered in the current environment
|
||||
} else {
|
||||
// Something else went wrong
|
||||
}
|
||||
});
|
||||
.prompt([
|
||||
/* Pass your questions in here */
|
||||
{ type: 'input', name: 'food', message: '你吃什么', default: '包子' },
|
||||
{ type: 'input', name: 'food', message: '吃辣吗？', default: '微辣' },
|
||||
])
|
||||
.then(answers => {
|
||||
// Use user feedback for... whatever!!
|
||||
console.log(answers);
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.isTtyError) {
|
||||
// Prompt couldn't be rendered in the current environment
|
||||
} else {
|
||||
// Something else went wrong
|
||||
}
|
||||
});
|
||||
|
||||
console.log(chalk.red("文字颜色"));
|
||||
console.log(chalk.red('文字颜色'));
|
||||
|
||||
program.name("bunny-cli").usage("<command> [options]");
|
||||
program.name('bunny-cli').usage('<command> [options]');
|
||||
|
||||
program
|
||||
.option("-d, --debug", "output extra debugging")
|
||||
.option("-s, --small", "small pizza size")
|
||||
.option("-p, --pizza-type <type>", "flavour of pizza");
|
||||
.option('-d, --debug', 'output extra debugging')
|
||||
.option('-s, --small', 'small pizza size')
|
||||
.option('-p, --pizza-type <type>', 'flavour of pizza');
|
||||
|
||||
program
|
||||
.command("clone <source> [destination]")
|
||||
.description("clone a repository into a newly created directory")
|
||||
.action((source, destination) => {
|
||||
console.log(source, destination);
|
||||
});
|
||||
.command('clone <source> [destination]')
|
||||
.description('clone a repository into a newly created directory')
|
||||
.action((source, destination) => {
|
||||
console.log(source, destination);
|
||||
});
|
||||
|
||||
program.parse(process.argv);
|
||||
|
||||
|
|
|
|||
39
bin/index.js
39
bin/index.js
|
|
@ -1,14 +1,29 @@
|
|||
#!/usr/bin/env node
|
||||
const { program } = require("commander"); // 命令行提示工具
|
||||
const chalk = require("chalk"); // 终端输出颜色变化
|
||||
const inquirer = require("inquirer"); // 交互选项
|
||||
const ora = require("ora"); // loading效果
|
||||
const spinner = ora("Loading unicorns").start(); // 注意要使用x几版本因为不支持
|
||||
const figlet = require("figlet"); // 生成艺术字
|
||||
const { program } = require('commander'); // 命令行提示工具
|
||||
const path = require('path'); // 引入操作路径
|
||||
const { CommandLogHelp, CommandLogStart } = require('./command-log');
|
||||
const { fileIsExist, createProject, downloadProject } = require('./utils');
|
||||
|
||||
console.log(program);
|
||||
console.log(chalk);
|
||||
console.log(inquirer);
|
||||
console.log(ora);
|
||||
console.log(spinner);
|
||||
console.log(figlet);
|
||||
// 首行显示
|
||||
CommandLogStart();
|
||||
|
||||
// 创建项目命令
|
||||
program
|
||||
.command('create <app-name>')
|
||||
.description('创建一个新项目')
|
||||
.action(async function (name) {
|
||||
// 创建项目-创建一个名字为name的项目，如果存在是否覆盖？
|
||||
const targetPath = path.join(process.cwd(), name);
|
||||
|
||||
// 文件夹下是否有这个名字
|
||||
await fileIsExist(targetPath, name);
|
||||
|
||||
// 新建项目
|
||||
const key = await createProject();
|
||||
// clone项目
|
||||
downloadProject(targetPath, key, name);
|
||||
});
|
||||
|
||||
// 给help信息添加提示
|
||||
CommandLogHelp();
|
||||
program.parse(process.argv);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
const chalk = require('chalk'); // 终端输出颜色变化
|
||||
const inquirer = require('inquirer'); // 交互选项
|
||||
const ora = require('ora'); // loading效果
|
||||
const gitClone = require('git-clone/promise'); // 拉取项目
|
||||
const fs = require('fs-extra'); // 操作文件
|
||||
const path = require('path'); // 引入操作路径
|
||||
const { question, projectList } = require('./config');
|
||||
|
||||
module.exports = {
|
||||
/**
|
||||
* 判断文件是否存在
|
||||
* 是否需要覆盖
|
||||
*/
|
||||
async fileIsExist(targetPath, name) {
|
||||
console.log(targetPath);
|
||||
if (fs.existsSync(targetPath, name)) {
|
||||
const awsaner = await inquirer.prompt({
|
||||
type: 'confirm',
|
||||
message: '是否覆盖文件夹❓',
|
||||
default: false,
|
||||
name: 'overWrite',
|
||||
});
|
||||
|
||||
// 用户选择是则删除文件夹
|
||||
if (awsaner.overWrite) {
|
||||
fs.remove(targetPath);
|
||||
console.log(chalk.green('✅删除成功'));
|
||||
} else return;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建文项目
|
||||
*/
|
||||
async createProject() {
|
||||
// 选择框架和语言
|
||||
const frame = await inquirer.prompt(question.frame);
|
||||
const frame_isTypeScript = `${frame.type}&${frame.isTypeScript}`;
|
||||
|
||||
// 如果选择的react框架
|
||||
if (frame.type === 'react') {
|
||||
const awsaner = await inquirer.prompt(question.react);
|
||||
const key = `${frame_isTypeScript}&${awsaner.router}`;
|
||||
return projectList[key];
|
||||
}
|
||||
// 如果选择是vue框架
|
||||
else {
|
||||
const awsaner = await inquirer.prompt(question.vue);
|
||||
const key = `${frame_isTypeScript}&${awsaner.router}`;
|
||||
return projectList[key];
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 从仓库clone项目
|
||||
*/
|
||||
downloadProject(targetPath, key, name) {
|
||||
const spinner = ora('下载中...').start(); // 注意要使用x几版本因为不支持
|
||||
|
||||
// 如果有git，删除原有的git
|
||||
if (fs.existsSync(targetPath, '.git')) {
|
||||
fs.remove(path.join(targetPath, '.git'));
|
||||
}
|
||||
|
||||
gitClone(projectList[key], name, { checkout: 'main' }, function (error) {
|
||||
if (error) {
|
||||
spinner.fail('😭下载失败，请稍后重试'); // 注意要使用x几版本因为不支持
|
||||
} else {
|
||||
spinner.succeed('😄下载成功'); // 注意要使用x几版本因为不支持
|
||||
const overText = `
|
||||
⚓ Running completion hooks...
|
||||
|
||||
📄 Generating README.md...
|
||||
|
||||
🎉 Successfully created project ${name}
|
||||
👉 Get started with the following commands:
|
||||
|
||||
cd vue_js_vuex
|
||||
npm run serve
|
||||
`;
|
||||
console.log(overText);
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
"eslint-plugin-prettier": "^5.1.1",
|
||||
"figlet": "^1.7.0",
|
||||
"fs-extra": "^11.2.0",
|
||||
"git-clone": "^0.2.0",
|
||||
"inquirer": "^8.0.0",
|
||||
"ora": "^5.0.1",
|
||||
"prettier": "^3.1.1"
|
||||
|
|
@ -2125,6 +2126,11 @@
|
|||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/git-clone": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/git-clone/-/git-clone-0.2.0.tgz",
|
||||
"integrity": "sha512-1UAkEPIFbyjHaddljUKvPhhLRnrKaImT71T7rdvSvWLXw95nLdhdi6Qmlx0KOWoV1qqvHGLq5lMLJEZM0JXk8A=="
|
||||
},
|
||||
"node_modules/git-raw-commits": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmmirror.com/git-raw-commits/-/git-raw-commits-2.0.11.tgz",
|
||||
|
|
|
|||
89
package.json
89
package.json
|
|
@ -1,46 +1,47 @@
|
|||
{
|
||||
"name": "bunny-cli",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
"bunny-cli": "./bin/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
|
||||
"lint:prettier": "prettier --write --loglevel warn \"bin/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
|
||||
"lint:lint-staged": "lint-staged",
|
||||
"prepare": "husky install",
|
||||
"release": "standard-version",
|
||||
"commit": "git status && git add -A && git-cz",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"chalk": "^4.0.0",
|
||||
"commander": "^11.1.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.1.1",
|
||||
"figlet": "^1.7.0",
|
||||
"fs-extra": "^11.2.0",
|
||||
"inquirer": "^8.0.0",
|
||||
"ora": "^5.0.1",
|
||||
"prettier": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^18.4.3",
|
||||
"@commitlint/config-conventional": "^18.4.3",
|
||||
"commitizen": "^4.3.0",
|
||||
"cz-git": "^1.8.0",
|
||||
"eslint": "^8.56.0",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^15.2.0"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "node_modules/cz-git"
|
||||
}
|
||||
}
|
||||
"name": "bunny-cli",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"bin": {
|
||||
"bunny-cli": "./bin/index.js"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
|
||||
"lint:prettier": "prettier --write --loglevel warn \"bin/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
|
||||
"lint:lint-staged": "lint-staged",
|
||||
"prepare": "husky install",
|
||||
"release": "standard-version",
|
||||
"commit": "git status && git add -A && git-cz",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"chalk": "^4.0.0",
|
||||
"commander": "^11.1.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-prettier": "^5.1.1",
|
||||
"figlet": "^1.7.0",
|
||||
"fs-extra": "^11.2.0",
|
||||
"git-clone": "^0.2.0",
|
||||
"inquirer": "^8.0.0",
|
||||
"ora": "^5.0.1",
|
||||
"prettier": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^18.4.3",
|
||||
"@commitlint/config-conventional": "^18.4.3",
|
||||
"commitizen": "^4.3.0",
|
||||
"cz-git": "^1.8.0",
|
||||
"eslint": "^8.56.0",
|
||||
"husky": "^8.0.3",
|
||||
"lint-staged": "^15.2.0"
|
||||
},
|
||||
"config": {
|
||||
"commitizen": {
|
||||
"path": "node_modules/cz-git"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue