配置用户代码片段（vue.code-snippets）

为了提高开发效率，很多时候会在vscode中配置好一些常用的代码片段，省时省力还显示你很NB。
以下是基于vue3跟Ts个人的配置，分享出来（代码直接复制到vue.code-snippets文件即可使用，可根据个人情况进行修改prefix)。

{
  "new page": {
    "prefix": "<vue-basic",
    "body": [
      "<template>",
      "</template>",
      "<script lang=\"ts\">",
      "import { ref, defineComponent } from 'vue'",
      "export default defineComponent({",
      "  name: '$1',",
      "  setup() {",
      "    return {",
      "    }",
      "  },",
      "})",
      "</script>",
      "<style lang=\"less\">",
      "</style>",
      ""
    ],
    "description": "new component"
  },
  "template": {
    "scope": "vue",
    "prefix": "template",
    "body": [
        "<template>",
        "  $1",
        "</template>"
    ],
    "description": "Create <template> block"
  },
  "script": {
      "scope": "vue",
      "prefix": "script",
      "body": [
          "<script lang=\"ts\">",
          "import { defineComponent } from 'vue';",
          "",
          "export default defineComponent({",
          "  $2",
          "});",
          "</script>"
      ],
      "description": "Create <script> block"
  },
  "script setup": {
      "scope": "vue",
      "prefix": "script setup",
      "body": [
          "<script lang=\"ts\" setup>",
          "defineProps<{ $1 }>();",
          "</script>"
      ],
      "description": "Create <script setup> + <script> blocks"
  },
  "style": {
      "scope": "vue",
      "prefix": "style",
      "body": [
          "<style lang=\"less\" scoped>",
          "$1",
          "</style>"
      ],
      "description": "Create <style> block"
  },
  "v-for": {
      "scope": "html",
      "prefix": "v-for",
      "body": [
          "<template v-for=\"$1 in $2\">",
          "  $3",
          "</template>"
      ],
      "description": "Create html tag with v-for"
  },
  "v-if": {
      "scope": "html",
      "prefix": "v-if",
      "body": [
          "<template v-if=\"$1\">",
          "  $2",
          "</template>"
      ],
      "description": "Create html tag with v-if"
  },
  "v-else-if": {
      "scope": "html",
      "prefix": "v-else-if",
      "body": [
          "<template v-else-if=\"$1\">",
          "  $2",
          "</template>"
      ],
      "description": "Create html tag with v-else-if"
  },
  "v-else": {
      "scope": "html",
      "prefix": "v-else",
      "body": [
          "<template v-else>",
          "  $2",
          "</template>"
      ],
      "description": "Create html tag with v-else"
  }
}

说明：vue.code-snippets文件放在**.vscode**里面