vscode配置Vue3代码片段

### 如何在 VSCode 中配置 Vue3 代码片段

#### 用户设置中的代码片段配置
为了在 Visual Studio Code (VSCode) 中配置适用于 Vue3 的代码片段，需进入设置并找到用户代码片段选项。通过命令面板 (`Ctrl+Shift+P` 或 `Cmd+Shift+P`) 输入“Configure User Snippets”，从中选择要编辑的语言环境，在本案例中应为 Vue 文件对应的 JSON 配置文件[^1]。

#### 编辑 vue.json 文件
一旦选择了合适的语言环境后，将会打开一个名为 `vue.json` 的文件用于编写自定义代码片段。此文件位于全局用户设置目录下或工作区特定位置取决于最初的选择路径。

#### 定义新的代码片段结构
对于希望快速生成的基础 Vue 组件模板而言，可以按照如下方式构建：

{
    "Print to console": {
        "prefix": "vue3",
        "body": [
            "<template>",
            " <div></div>",
            "</template>",
            "",
            "<script setup lang=\"ts\">",
            "import { ref, reactive, toRefs, onMounted} from 'vue'",
            "",
            "</script>",
            "<style scoped lang=\"less\">",
            "</style>"
        ],
        "description": "Create a basic Vue component structure"
    }
}

上述JSON对象描述了一个简单的Vue组件框架，其中包含了HTML模板部分、TypeScript脚本以及样式声明区域，并指定了触发该片段的前缀关键字为`vue3`。

#### 使用新创建的代码片段
完成以上步骤之后，在任何 `.vue` 文件内键入指定的前缀词（这里是`vue3`），按下Tab键或者Enter键即可自动展开成预设好的完整组件架构[^2]。