【Vue工程】009-Plop 代码生成器

川长思鸟来 2023-09-27 21:21 18阅读 0赞

## 【Vue工程】009-Plop 代码生成器 ##

#### 文章目录 ####

*  【Vue工程】009-Plop 代码生成器
 *  一、概述
 *   *  1、简介
     *  2、官方文档
 *  二、基本使用
 *   *  1、安装
     *  2、根目录创建 \`plopfile.js\`
     *  3、创建 plop-templates 目录
     *  4、\`package.json\` 增加脚本
     *  5、使用

## 一、概述 ##

### 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

> 脚本文件：plop-templates/page/prompt.cjs

### 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