告别手敲template,自动生成基础模板(Vue)

如果觉得文章排版显示丑陋，可以来这里查看使用vuePress撰写的原文，显示效果要略好于掘金。

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

以Vue项目为例,我们新建一个component或view的时候，需要新建一个.vue文件，然后写<template>、<script>、<style>。最后写我们的业务代码。如果使用class风格来写Vue还需要在每个页面都引入Vue和Component。

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

<template>
    <div />>
</template>

<script>

export default{
    name:''
}
</script>

<style lang>   

</style>

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

1、新建component/view的对应的.vue文件/文件夹

2、然后打开页面写template,script,style

3、如果是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文件，输入tscomponent,会出现代码提示：

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

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

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

后来，在学习Vue-element-admin作者写的手摸手，带你用Vue撸后台的文章了看到了作者使用plop生成代码的方案，随之研究了一下plop的使用，在我项目中体验了一把plop，那感觉，就两个字，酸爽。

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

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

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

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

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

安装plop

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

npm install --save-dev plop

基本配置

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


<template>
  <div />
</template>

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

<style lang="" scoped>

</style>

然后编写plopfile.js


module.exports = function(plop){
        
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;
    })
}