Vue3 模板代码片段

文件 => 首选项 => 配置用户代码片段

新建全局代码片段，设置文件名

直接复制：

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
              "<div>",
			  "<!-- 定义子组件 -->",
              "</div>",
            "</template>",
            "<script>",
             "// 解构",
            "import { defineComponent",
            			"} from 'vue'",
            "// 模块化",
            "export default defineComponent({",
               "name:'Home', //组件名称",
               "props: {",
            "// 接收父组件数据",
            			"},",
               "components: {",
            "// 定义子组件",
            				"},",
            "setup(props, ctx){",
            "// 这里没有this,直接使用props里数据",
              "return {}",
            			"}",
            		"})",
            "</script>",
            "<style scoped>",
			"/* scoped 使用得定义的样式只在本页面内生效  */",
            "</style>",
			" "
  		],
  		"description": "A vue file template"
	}
}

简洁版本：

{
  "vue3 template": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "    <div>",
      "$1",
      "    </div>",
      "</template>\n",
      "<script setup>",
      "import { ref } from \"vue\" ",
      "$2",
      "</script>\n",
      "<style lang=\"less\" scoped>",
      "$3",
      "</style>"
    ],
    "description": "vue3 template"
  }
}