vscode快速生成vue3模板

此配置在用户代码片段中新建文件，属于自己的个性化快捷代码

"Print to console": {
          "prefix": "vue3",
          "body": [
            "<!-- $0 -->",
            "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script lang='ts'>",
            "import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'",
            "interface DataProps {}",
    
            "export default {",
            "    name: '',",
            "      setup() {",
            "          console.log('1-开始创建组件-setup')",
            "          const data: DataProps = reactive({",
            ""            ,
            "          })",
            "          onBeforeMount(() => {",
            "              console.log('2.组件挂载页面之前执行----onBeforeMount')",
            "          })",
            "          onMounted(() => {",
            "              console.log('3.-组件挂载到页面之后执行-------onMounted')",
            "          })",
            "          const refData = toRefs(data);",
            "          return {",
            "              ...refData,",
            "          }",
            ""  ,
            "      }",
            "  };",
            "</script>",
            "<style lang='scss' scoped>",
            "</style>",
        ],
          "description": "Log output to console"
        }

新建vue文件，输入vue3按tab键就会生成以上代码，输入的名字显示代码是根据prefix:vue3配置的，你也可以取其他的名字，$0是生成代码后光标的所在位置

demo.png