【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