告別手敲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的進一步用法能夠參考這個項目中的使用

結語

第一次在掘金髮表文章。才疏學淺，若是文章有任何不妥的地方，歡迎指出，一塊兒交流。