【Vue工程】009-Plop 代码生成器
【Vue工程】009-Plop 代码生成器
文章目录
一、概述
1、简介
Plop 是一个用于生成代码文件的可配置的脚手架工具。它可以帮助开发人员自动创建代码文件、模板和代码片段,从而提高开发效率。
Plop 的工作原理是通过定义称为 “生成器”(generators)的脚本来生成代码文件。每个生成器定义了一组操作和模板,用于生成特定类型的文件或代码片段。当你运行 Plop 命令时,它会根据你的选择执行相应的生成器,并根据模板和操作的定义创建文件。
2、官方文档
https://plopjs.com/documentation/
二、基本使用
1、安装
pnpm add plop -D
2、根目录创建 plopfile.js
module.exports = function (plop) {
plop.setWelcomeMessage('请选择需要创建的模板:')
plop.setGenerator('page', require('./plop-templates/page/prompt.cjs'))
// 增加其他模板
// plop.setGenerator('page1', require('./plop-templates/page1/prompt.cjs'))
// plop.setGenerator('page2', require('./plop-templates/page2/prompt.cjs'))
}
3、创建 plop-templates 目录
模板文件:plop-templates/page/page.hbs
<template>
<div></div>
</template>
<script lang="ts" setup>
// 一、引入
// 二、数据
// 三、逻辑
// 四、钩子
// 五、其他
</script>
<style lang="scss" scoped></style>
脚本文件:plop-templates/page/prompt.cjs
const fs = require('fs');
// 递归获取指定路径下的所有文件夹(目录)路径
function getFolder(path) {
const components = [];
const files = fs.readdirSync(path);
files.forEach((item) => {
const stat = fs.lstatSync(`${path}/${item}`);
if (stat.isDirectory() === true) {
components.push(`${path}/${item}`);
components.push(...getFolder(`${path}/${item}`));
}
});
return components;
}
module.exports = {
// 描述
description: '创建页面',
// 提示列表
prompts: [
{
type: 'list',
name: 'path',
message: '请选择创建目录',
// 选择列表
choices: getFolder('src/pages'),
},
{
type: 'input',
name: 'name',
message: '请输入文件名',
// 验证
validate: (v) => {
if (!v || v.trim === '') return '文件名不能为空';
else return true;
},
},
],
// 动作列表
actions: (data) => {
return [
{
// 操作类型
type: 'add',
// 生成文件目标位置
path: `${data.path}/{{dotCase name}}.vue`,
// 模板文件位置
templateFile: 'plop-templates/page/page.hbs',
},
];
},
};
4、package.json
增加脚本
"new": "plop"
5、使用
D:\MySoft\Environment\nodejs\npm.cmd run new
> my-vue-ts@0.0.0 new
> plop
? 请选择创建目录 src/pages/chat/ai
? 请输入文件名 chatgpt
√ ++ \src\pages\chat\ai\chatgpt.vue