首先创建vue代码片段文件，在sublime text中选择tools → developer → new snippet，替换模板内容为包含template、script和style结构的cdata代码；接着将文件保存为vuecomponent.sublime-snippet至packages/user目录；关键步骤是设置scope为text.html.vue以确保在.vue文件中生效；最后在.vue文件输入vuecomp并按tab键即可生成组件模板，通过定义vdata、vmethod等更多片段提升开发效率。
在 Sublime Text 中为 Vue 文件配置自定义代码片段，可以大幅提升开发效率。下面介绍如何为 .vue 文件创建常用的 Vue 代码片段。
1. 创建 Vue 代码片段文件
打开 Sublime Text，点击顶部菜单栏的 Tools → Developer → New Snippet...，会生成一个代码片段模板。
将模板内容替换为以下示例（比如创建一个快速生成 Vue 单文件组件结构的片段）：
<snippet>
<content><![CDATA[
<template>
<div class="$1">
$2
</div>
</template>
<script>
export default {
name: '$3',
data() {
return {
$4
}
},
methods: {
$5
}
}
</script>
<style scoped>
$6
</style>
]]></content>
<tabTrigger>vuecomp</tabTrigger>
<scope>text.html.vue</scope>
<description>Vue Component Template</description>
</snippet>
2. 保存代码片段
将上述代码保存为：VueComponent.sublime-snippet
立即学习“前端免费学习笔记（深入）”；
保存路径建议为：
Packages/User/VueComponent.sublime-snippet
可通过菜单 Preferences → Browse Packages... 进入 User 目录。
3. 设置作用域 scope 以支持 Vue 文件
关键点是 scope 必须设置为 text.html.vue，这是 Sublime 中 Vue 文件的语法识别作用域。这样片段才能在 .vue 文件中生效。
如果你使用的是 Vue Syntax Highlight 插件（如 "Vue Syntax Highlight" 或 "Vue.js"），确保已正确安装并启用。
4. 使用代码片段
在 .vue 文件中输入 vuecomp，然后按 Tab 键，即可生成预设的组件结构。
你可以根据需要定义更多片段，例如：
- vdata：快速生成 data 函数
- vmethod：生成 methods 结构
- vprop：定义 props
基本上就这些。只要片段的作用域正确，并保存在 User 目录下，就能在 Vue 文件中顺畅使用。多写几个常用片段后，写组件会快很多。
