前置条件

• 满足选项的顺序规范

使用步骤

• 打开命令选项板

  Windows:
  ctrl+shift+p
  
  Mac:
  cmd+shift+p

• 输入：snippet

• 选择：Preferences: Configure User Snippets

• 选择：New Global Snippets file...

• 输入模板名称，如my

• 复制粘贴下面json代码

• 然后在任意文件中输入以下各关键词即可快速创建页面模板代码：

  • my.page
  • my.component

页面、组件

{
    "page": {
        "prefix": "page", 
        "body": [
            "<template>", 
            "  <div>", 
            "    <h1>Page</h1>", 
            "    <h2 v-text=\"title\"></h2>", 
            "    <p v-text=\"words\"></p>", 
            "  </div>", 
            "</template>", 
            "", 
            "<script>", 
            "  //   import ComponentA from '@/components/ComponentA.vue'", 
            "  //   import ComponentB from '@/components/ComponentB.vue'", 
            "", 
            "  //   import DirectiveA from '@/directives/DirectiveA.vue'", 
            "", 
            "  //   import FilterA from '@/filters/FilterA.vue'", 
            "", 
            "  //   import MixinA from '@/mixins/MixinA.vue'", 
            "  //   import MixinB from '@/mixins/MixinB.vue'", 
            "", 
            "  export default {", 
            "    // components: { ComponentA, ComponentB },", 
            "    // directives: { DirectiveA },", 
            "    // filters: { filters }", 
            "    // mixins: [MixinA, MixinB],", 
            "    data() {", 
            "      const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']", 
            "      return {", 
            "        days,", 
            "        words: '',", 
            "        now: new Date(),", 
            "      }", 
            "    },", 
            "    computed: {", 
            "      title() {", 
            "          return `Today is ${this.days[this.now.getDay()]}.`",
            "      },", 
            "    },", 
            "    watch: {", 
            "      now: {", 
            "        immediate: true,", 
            "        handler(newValue, oleValue) {", 
            "          console.log(['now', newValue, oleValue])", 
            "        },", 
            "      },", 
            "      words(newValue, oleValue) {", 
            "        console.log(['words', newValue, oleValue])", 
            "      },", 
            "    },", 
            "    beforeMount() {", 
            "      // some requests maybe", 
            "    },", 
            "    mounted() {", 
            "      this.words = this.genernateWords()", 
            "    },", 
            "    beforeDestroy() {", 
            "      // do some clearTimeout or removeEventListener", 
            "    },", 
            "    methods: {", 
            "      genernateWords() {", 
            "            return `The time is ${this.now.getHours()}:${this.now.getMinutes()}.`",
            "      },", 
            "    },", 
            "    provide() {",
            "        return {",
            "            valueFromParent: \"haha\",",
            "        }",
            "    }",
            "  }", 
            "</script>", 
            "", 
            "<style></style>", 
            ""
        ], 
        "description": "page template"
    },
    "component": {
        "prefix": "component", 
        "body": [
            "<template>", 
            "  <div>", 
            "    <h1>ComponentA</h1>", 
            "    <h2 v-text=\"title\"></h2>", 
            "    <p v-text=\"words\"></p>", 
            "  </div>", 
            "</template>", 
            "", 
            "<script>", 
            "  //   import ChildComponentA from './ChildComponentA.vue'", 
            "  //   import ChildComponentB from './ChildComponentB.vue'", 
            "", 
            "  //   import DirectiveA from '@/directives/DirectiveA.vue'", 
            "", 
            "  //   import FilterA from '@/filters/FilterA.vue'", 
            "", 
            "  //   import MixinA from '@/mixins/MixinA.vue'", 
            "  //   import MixinB from '@/mixins/MixinB.vue'", 
            "", 
            "  export default {", 
            "    name: 'ComponentA',", 
            "    // components: { ChildComponentA, ChildComponentB },", 
            "    // directives: { DirectiveA },", 
            "    // filters: { filters }", 
            "    // mixins: [MixinA, MixinB],", 
            "    model: {", 
            "      prop: 'value',", 
            "      event: 'change',", 
            "    },", 
            "    props: {", 
            "      value: {", 
            "        type: String,", 
            "        default: '',", 
            "      },", 
            "      now: {", 
            "        type: Date,", 
            "        default: () => new Date(),", 
            "      },", 
            "    },", 
            "    data() {", 
            "      const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']", 
            "      return {", 
            "        days,", 
            "        words: '',", 
            "      }", 
            "    },", 
            "    computed: {", 
            "      title() {", 
            "          return `Today is ${this.days[this.now.getDay()]}.`",
            "      },", 
            "    },", 
            "    watch: {", 
            "      now: {", 
            "        immediate: true,", 
            "        handler(newValue, oleValue) {", 
            "          console.log(['now', newValue, oleValue])", 
            "        },", 
            "      },", 
            "      words(newValue, oleValue) {", 
            "        console.log(['words', newValue, oleValue])", 
            "      },", 
            "    },", 
            "    beforeMount() {", 
            "      // some requests maybe", 
            "    },", 
            "    mounted() {", 
            "      this.words = this.genernateWords()", 
            "    },", 
            "    beforeDestroy() {", 
            "      // do some clearTimeout or removeEventListener", 
            "    },", 
            "    methods: {", 
            "      genernateWords() {", 
            "            return `The time is ${this.now.getHours()}:${this.now.getMinutes()}.`",
            "      },", 
            "    },", 
            "    inject: ['valueFromParent'],", 
            "  }", 
            "</script>", 
            "", 
            "<style></style>", 
            ""
        ], 
        "description": "component template"
    }
}