1.不使用setup语法糖的模板

vue3-default.png

{
    "Print to console": {
      "prefix": "vue3-default",
      "body": [
        "<template>",
        "  <div :class=\"\\$style['container']\">",
        "    $Index",
        "  </div>",
        "</template>",
        "",
        "<script lang=\"ts\">",
        "import {defineComponent} from \"vue\"",
        "",
        "export default defineComponent({",
        "name: \"$Index\",",
        "setup(){}",
        "})",
        "</script>",
        "",
        "<style lang=\"less\" module>",
          " .container {",
          " }",
        "</style>",
        ""
      ],
      "description": "Log output to console"
    }
  }

2.使用setup语法糖

vue3-setup.png

{
    "Print to console": {
      "prefix": "vue3-setup",
      "body": [
        "<template>",
        "  <div :class=\"\\$style['container']\">",
        "    $Index",
        "  </div>",
        "</template>",
        "",
        "<script setup lang=\"ts\">",
        "import {ref} from \"vue\"",
        "const a = ref(0)",
        "</script>",
        "",
        "<style lang=\"less\" module>",
          " .container {",
          " }",
        "</style>",
        ""
      ],
      "description": "Log output to console"
    }
  }