Vue---一条命令自动生成模板

2023-12-06 10:22:58

1.在开发过程中，无论我们添加页面也好还是添加组件也好。都需要不停的新建Vue文件（或者其他框架或者html/js/css文件）

以Vue项目为例，我们新建一个component或view的时候，需要新建一个.vue文件，然后写、

一般来说一个.vue 文件的格式如下:

<template>
    <div />
</template>

<script>
export default {
    data(){
        return {
            name:'123'
        }
    }
}
</script>

<style lang>

<style>

这样我们每次再页面开发之前都需要进行如下操作:

新建component/view 的对应的.vue文件/文件夹
然后打开页面写template,script,style
如果是css单独写的还要新建一个.css(less/scss等)。

假设每次我们完成上边这一系列操作需要30秒，我们一个项目有 50个vue文件。就需要1500秒，约等于25分钟。如果我们做5个vue项目，我们相当于浪费了两个小时再写这种重复性高、无聊且枯燥的代码。

作为一个程序猿有追求的程序猿，怎么能忍受在这种地方浪费大好的青春。

基于vscode的Snippets

通过vscode 的snippets我们可以自己配置自定义的snippets，从而实现快捷生成代码片段：

在Vscode里按F1，输入snippets -> 选择配置用户代码片段

选择后出现选择配置的界面，这里我们对Vue文件的代码片段进行配置，所以选择Vue.json

在打开的Vue.json里会有一段简单的说明和一个例子告诉我们如何编写代码片段，我们在vue.json中编写如下片段：

// vue.json

{
    "生成组件结构"：{
    "prefix":"tscomponent",
    "body":[
       "<template>"
			"<div class></div>"
			"</template>"
			"<script lang='ts'>"
			"import { Component, Vue } from 'vue-property-decorator';"
			"@Component({"
			"name: ''"
			"})"
			"export default class extends Vue {}"
			"</script>"
			"<style lang='less'>"
			"</style>"
        ]
    }
}

然后打开一个vue文件，输入tscomponents，会出现代码提示：

确定以后会生成我们配置的代码片段：

上边生成的代码是经过格式化的，因为我们在JSON中配置的代码片段并没有调整缩进，想要生成的时候就缩进只需要在需要缩进的行的开始引号后加对应的空格即可

因为这个方案还是需要手动创建vue文件和.less文件、并且组件的name需要每次手动输入，这一点也不geek

基于plop使用命令行自动生成.vue文件

plop 不仅限于vue项目，在此只是使用vue项目为例

plop的介绍可以看官网，plop功能主要是基于inquirer和handlebars

简单的说就是通过提前配置要生成的页面模板，并且在命令行中接收指定的参数，从而生成我们需要的模板。

这里简单介绍一下我们实现的基础模板生成的流程，关于plop的 API 和其他相关内容不在赘述，感兴趣的朋友可以前往官网查阅。

安装plop

首先我们按照官网的说明在项目中安装plop

npm install --save-dev plop

基本配置

由于plop的模板基于handlebars，我们在茛目录下创建一个piop-templates文件夹，并在piop-teemplates/view里新建一个index.hbs

<template>

    <div />
    
<template>

<script>
    export default {
        name: '{{ properCase name }}',
        props: {},
        data() {
            return {}
        },
        created() {},
        mounted() {},
        methods: {}
    }

</script>

<style lang="scss" scoped>

</style>

然后编写plopfile.js

module.exports = function(piop){
    
    plop.setGenerator('test',{
        description: 'generate a test',
        prompts: [
            {
                type: 'input',
                name: 'name',
                message: 'view name please',
            }
        ],
        actions: data => {
            const name = '{{ name }}';
            const actions = [
                {
                    type: 'add',
                    path: `src/views/${name}/index.vue`,
                    templateFile: 'plop-templates/view/index.hbs',
                    data: {
                        name: name
                    }
                }
            ];
            return actions;
        }
    })
}

然后在 package.json 中设置 script

"script":{
    "new": "plop"
}

设置 script 并运行

运行 npm run new 或 yarn new

根据模板生成vue文件

然后输入name以后会看到

这个时候我们在项目的views/test/index.vue里就可以看到生成的vue文件

这样执行命令后就会根据我们输入的name生成对应的文件夹和页面，并且组件的name也已经有了值。

name的值是通过action的时候返回给hbs，后插入到页面中的，具体这部分内容可以参考plop和handlebard的官方文档。

当然，plop的使用并不只生成静态的模板，我们可以*发挥配置生成的文件需要显示的内容、文件生成位置、css处理器类型、JS/TS。甚至同时生成Router文件。

码农公寓