background

During the development process, there is always some template code to write, such as I write vUE, various namespaces in VUe2, various introductions in VUe3. Almost every VUE file needs it.

Every time to write a tired batch, no technical content. Pure physical work, but it has to be done.

At this point, people may write various code blocks using their own accustomed editor to reduce the workload.

However, the editors in the team are not unified. As we all know, the front-end not only has many languages, but also a lot of development tools, and there is no good way to store code blocks across editors and machines (dACHan unified cloud editor is slightly later, excluding you).

This is where PLOp was discovered (while learning vue-element-admin by rubbing hands with pantypants).

What problem did Plop solve?

Solves the above problem of writing front-end blocks across editors and machines for the same project.

How to integrate

1. Integrate PLOP into the project

npm i plop -D
Copy the code

Create a new folder under the root directory to hold the template and script commands.

<! -- plop-templates/views/index.hbs -->

{{#if template}}
<template>
  <div class="{{lowerCase name}}-main">
    {{ properCase name }}
  </div>
</template>
{{/if}}
{{#if script}}
<script>
export default {
  name: '{{ properCase name }}', components: { }, props: { }, data: () => ({ }), computed: {}, watch: Create() {}, mounted() {}, beforeCreate() {}, // Create before beforeMount() {}, // Create before mounting beforeUpdate() {}, // Lifecycle - Updated () {} before update, // Lifecycle - beforeDestroy() {} after update, // Lifecycle - Destroyed () {} before destruction, Activated () {}, methods: {},};</script>
{{/if}}
{{#if style}}
<style lang="less" scoped>
.{{lowerCase name}}-main{}</style>
{{/if}}
Copy the code

// plop-templates/views/prompt.js
const { notEmpty } = require('.. /utils.js');
module.exports = {
  description: 'Create a new page'.prompts: [{
    type: 'input'.name: 'name'.message: 'Page name'.validate: notEmpty('name'),}, {type: 'checkbox'.name: 'blocks'.message: 'What to include :'.choices: [{
      name: '<template>'.value: 'template'.checked: true}, {name: '<script>'.value: 'script'.checked: true}, {name: 'style'.value: 'style'.checked: true],},validate(value) {
      if (value.indexOf('script') = = = -1 && value.indexOf('template') = = = -1) {
        return '
      ;
      }
      return true; }},].actions: (data) = > {
    const name = '{{properCase name}}';
    const actions = [{
      type: 'add'.path: `src/views/${name}/index.vue`.templateFile: 'plop-templates/view/index.hbs'.data: {
        name,
        template: data.blocks.includes('template'),
        script: data.blocks.includes('script'),
        style: data.blocks.includes('style'),}}];returnactions; }};Copy the code

The directory structure is shown below

Create plop.js in the root directory

This is the configuration file that PLOp will read

// plopfile.js
const viewGenerator = require('./plop-templates/view/prompt');
const componentGenerator = require('./plop-templates/component/prompt');
const storeGenerator = require('./plop-templates/store/prompt');
module.exports = (plop) = > {
  plop.setGenerator('view', viewGenerator);
  plop.setGenerator('component', componentGenerator);
  plop.setGenerator('store', storeGenerator);
};
Copy the code

How to add commands for easy use

Add script script to package.json

{
  "scripts": {
    "new": "plop"}},Copy the code

Five, how to use

npm run new
Copy the code

rendering

The last

I provide two sets of templates for my own use, respectively vue2 and VUe3

vue2.zip

vue3.zip

Note: The Store uses modules that are separate and self-registered. If you are interested, you can see this starless front end tour (13) — require.context and vuex persistence