前端工程化工具——plop的使用-生成模板页面

背景

软件列表

软件名称	版本号	备注
vue	3.2.13
vue-cli	5.0.8
plop	4.0.1

操作步骤

新建vue3工程

vue create test-plop

按提示完成操作即可


modules安装工具选择：yarn或npm均可

安装plop模块

yarn add plop -g

新建模板文件

page1/index.hbs

<template>
    <div>
        Page1
    </div>
</template>
<script setup name="{{ properCase componentName }}">
// const { proxy } = getCurrentInstance()
// const router = useRouter()
// const route = useRoute()
</script>
<style lang="less" scoped>
</style>

page1/prompt.js

const path = require('path')
const fs = require('fs')
function getFolder(path) {
    let components = []
    const files = fs.readdirSync(path)
    files.forEach(function (item) {
        let stat = fs.lstatSync(path + '/' + item)
        if (stat.isDirectory() === true && item != 'components') {
            components.push(path + '/' + item)
            components.push.apply(components, 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 => {
        let relativePath = path.relative('src/pages', data.path)
        const actions = [
            {
                type: 'add',
                path: `${data.path}/{{dotCase name}}.vue`,
                templateFile: 'plop-tpls/page1/index.hbs',
                data: {
                    componentName: `${relativePath} ${data.name}`
                }
            }
        ]
        return actions
    }
}

page2/index.hbs

<template>
    <div>
        Page2
    </div>
</template>
<script setup name="{{ properCase componentName }}">
// const { proxy } = getCurrentInstance()
// const router = useRouter()
// const route = useRoute()
</script>
<style lang="less" scoped>
</style>

page2/prompt.js

const path = require('path')
const fs = require('fs')
function getFolder(path) {
    let components = []
    const files = fs.readdirSync(path)
    files.forEach(function (item) {
        let stat = fs.lstatSync(path + '/' + item)
        if (stat.isDirectory() === true && item != 'components') {
            components.push(path + '/' + item)
            components.push.apply(components, 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 => {
        let relativePath = path.relative('src/pages', data.path)
        const actions = [
            {
                type: 'add',
                path: `${data.path}/{{dotCase name}}.vue`,
                templateFile: 'plop-tpls/page2/index.hbs',
                data: {
                    componentName: `${relativePath} ${data.name}`
                }
            }
        ]
        return actions
    }
}

新增plop配置文件

位置：项目根目录
文件名：plopfile.js
内容

module.exports = function (plop) {
  plop.setWelcomeMessage('请选择需要创建的模式：')
  
  plop.setGenerator('page1', require('./plop-tpls/page1/prompt'))
  plop.setGenerator('page2', require('./plop-tpls/page2/prompt'))
}

新增script配置plop

位置：项目根目录
修改文件：package.json
字段：script
内容：

"plop": "plop"

新建src/pages

新建src/pages目录，防止执行yarn plop出错，提示找不到该目录

生成模板页面

1. 执行yarn plop命令
2. 依据命令操作
   
   

整体效果

demo

源码下载地址

见文首