– The following figure shows the procedure

Enter the following snippet in vue.json.code-snippets

"Print1 to console": {
    	"prefix": "vv3",
    	"body": [
    	"<template>",
        "\t<div>",
        "\t</div>",
        "</template>",
        "<script lang=\"ts\">",
        "import { defineComponent } from 'vue';",
        "\nexport default defineComponent({",
        "\tname: 'App',",
        "});",
        "</script>\n",
    	],
    	"description": "Log output to console"
    }
Copy the code

Then enter vv3 in the newly created VUE file to quickly build the related template.

vue2

// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: // "Print to console": { // "prefix": "log", // "body": [ // "console.log('$1');", // "$2" // ], // "description": "Log output to console" // } "Print to console": { "prefix": "vv2", "body": [ "<template>", " <div class=\"$2\">$5</div>", "</template>", "", "<script>", "", "export default {", " components: {},", " data() {", " return {", "", " };", " },", " computed: {},", " watch: {},", " methods: {},", " created() {},", " mounted() {},", " beforeCreate() {},", " beforeMount() {},", " beforeUpdate() {},", " updated() {},", " beforeDestroy() {},", " destroyed() {},", " activated() {},", " }", "</script>", "< style lang = 'SCSS scoped >", "/ / @ import url ($3); the introduction of the CSS class", "$4", "< / style >", "description" : "Log output to console" } }Copy the code