vscode创建vue3的代码块

在vscode上编写模板，用的时候快速生成代码块。

方法1：（vue.json）文件情况下是：code - - - 首选项 - - -用户片段 - - - 在输入框中输入vue - - - 进入vue.json文件

方法2：（vue.json）文件情况下是：vscode左下角的⚙️（齿轮） - - -用户片段 - - - 在输入框中输入vue - - - 进入vue.json文件

如果有vue.json 文件的话，就可以直接进入文件中并将下面的代码复制进去，当然你也可以自己自定义自己的vue3的代码块

举例1:
"vue3less": { "prefix": "vue3less", //vueless 是名称，生成代码就输入这个名称就可以了 "body": [ "<template>\n", "</template>\n", "<script setup lang='ts'>\n", "</script>\n", "<style scoped lang='less'>\n", "</style>" ], "description": "代码片段的描述" }
举例2:
"vue3": { "prefix": "vue3", "body": [ "<template>", "</template>", "<script>", "import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'", "export default {", " name: '',", " setup() {", " console.log('1-开始创建组件-setup')", " const data = reactive({})", " onBeforeMount(() => {", " console.log('2.组件挂载页面之前执行----onBeforeMount')", " })", " onMounted(() => {", " console.log('3.-组件挂载到页面之后执行-------onMounted')", " })", " return {", " ...toRefs(data),", " }", " },", "}", "</script>", "<style scoped lang='less'>", "</style>" ], "description": "代码片段的描述" }

如果没有vue.json 文件，你可以如下创建全局的此文件也可以创建只有在当前项目起作用的vue.json 文件