If you find the layout of your article ugly, check out the original text written using vuePress here, which is slightly better than digging gold.

During development, whether we add pages or components. Need to constantly create new Vue files (or other frameworks or HTML/JS/CSS files)

In the case of a Vue project, when we create a component or view, we create a.vue file and write <template>, <script>, <style>. Finally write our business code. To write a Vue in class style, you also need to introduce Vue and Component on every page.

In general, a.Vue file has the following format:

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

<script>

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

<style lang>   

</style>


Copy the code

So we need to do the following every time before the page development:

Create a.vue file/folder for Component/View

2, Then open the page to write template,script,style

3. If CSS is written separately, create a new CSS (less/ SCSS, etc.).

Let’s say that each time we complete the above sequence of operations takes 30 seconds, we have 50 Vue files for a project. It takes 1,500 seconds, which is about 25 minutes. If we did five VUE projects, we would have wasted two hours of repetitive, boring, boring code.

How could a lazy programmer waste his youth in a place like this?

Snippets based on vscode

With vscode snippets we can configure our own custom snippets to quickly generate snippets:

  • Press F1 in VsCode and type snippets -> select configure user snippets

After selecting, the interface of selecting configuration appears. Here, we configure the code fragment of Vue file, so we select Vue. Json

Json opens with a brief description and an example of how to write snippets of code. Let’s write the following snippet in vue.json:

// vue.json {" generate component structure ":{"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>" ] } }Copy the code

Then open a vue file and type tsComponent to get a code prompt:

Make sure to generate our configured code snippet later:

The code generated above is formatted because the snippet we configured in JSON does not adjust the indentation. To generate the indentation, we simply add a space after the opening quotation mark of the line to which we want to indent it

The solution still requires the creation of vue files and.less files manually, and the component name needs to be entered manually each time, which is not geek at all

Later, in learning vue-element-admin author wrote the hand touch hand, take you to use Vue lu background article saw the author use ploP generation code scheme, then studied the use of PLOP, in my project experience a ploP, that feeling, just two words, sour cool.

Automatically generate. Vue files based on plop using the command line

Plop is not limited to the VUE project, but uses the VUE project as an example

Plop features are based on Inquirer and Handlebars

This is simply done by configuring the page template to be generated in advance and accepting the specified parameters on the command line.

Here is a brief introduction to the basic template generation process we implemented. No further details are required about THE PLOP API and other related content. Interested friends can go to the official website for reference.

Install the plop

First we install PloP in the project following the instructions on the official website

npm install --save-dev plop
Copy the code

The basic configuration

Since plop templates are based on Handlebars, we’ll create a plop-templates folder in the root directory and create an index.hbs folder in plop-templates/ View


<template>
  <div />
</template>

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

<style lang="" scoped>

</style>

Copy the code

Then write 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
            }
        }
        ];
        returnactions; })}Copy the code

Then set the script in package.json


"script":{
    "new: "plop"
}
Copy the code

Set up the script and run it

Run NPM run new or YARN new

Generate vUE files from the template

And then you type in name and you’ll see that later

At this point, we can see the generated vue file in the views/test/index.vue of the project

This will generate folders and pages based on the name you typed, and the component’s name already has a value.

The name value is returned to the HBS via action and then inserted into the page. For details, see the official documentation for PLOp and Handlebars.

Of course, the use of PLOP is not only to generate static templates, we can configure the generated file to display the content, file generation location, CSS processor type, JS/TS. Even generate Router files at the same time.

For reasons of space, further uses of ploP can be found in this project

conclusion

First post with the Nuggets. If the article has any improper place, welcome to point out, exchange together.