告别手敲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>


复制代码

这样咱们每次在页面开发以前都须要进行以下操做：

一、新建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文件，输入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;
    })
}

复制代码

而后在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和handlebars的官方文档。

固然，plop的使用并不仅生成静态的模板，咱们能够自由发挥配置生成的文件须要显示的内容、文件生成位置、CSS处理器类型、JS/TS。甚至同时生成Router文件。

因为篇幅缘由就不在赘述，关于plop的进一步用法能够参考这个项目中的使用

结语

第一次在掘金发表文章。才疏学浅，若是文章有任何不妥的地方，欢迎指出，一块儿交流。