安装Package Control后，通过插件库安装Vue Syntax Highlight实现语法高亮，再创建自定义代码片段vuecomp快速生成组件模板，配合Emmet、Babel等插件提升开发效率。
要让 Sublime Text 支持 Vue 开发，实现语法高亮和代码片段补全，不需要安装复杂的 IDE，只需简单配置插件即可。下面一步步教你如何设置。
安装 Package Control
如果还没安装 Package Control，先手动安装：
1. 打开 Sublime Text，按 Ctrl + `（反引号）打开控制台。2. 粘贴以下代码并回车：
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e8404c' + '8bc59f4b038aad7772686b'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen('http://packagecontrol.io/' + pf).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join(ipp, pf), 'wb').write(by)
3. 重启 Sublime Text，就能在 Preferences 菜单下看到 Package Control 了。
安装 Vue 语法高亮
推荐使用 Vetur 风格的 Vue 支持插件：
1. 按 Ctrl + Shift + P 打开命令面板。2. 输入 “Install Package”，选择 “Package Control: Install Package”。
3. 搜索并安装：Vue Syntax Highlight 或 VueJS。
4. 安装完成后，打开 .vue 文件，右下角语言模式选择 “Vue” 即可启用高亮。
该插件支持 <template>、<script>、<style> 区块的分别高亮，HTML、JavaScript、CSS/SCSS 都能正确着色。
立即学习“前端免费学习笔记（深入）”；
配置代码片段（Snippets）
你可以自定义或导入常用的 Vue 代码片段，比如快速生成一个组件模板。
1. 点击菜单 Tools → Developer → New Snippet…2. 替换内容如下，保存为 VueComponent.sublime-snippet：
<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>
3. 保存路径默认即可（Packages/User/）。
使用时，在 .vue 文件中输入 vuecomp + Tab 键，就能快速生成标准组件结构。
其他增强功能
为了让开发更高效，可以顺带安装这些插件：
- Emmet：支持在 template 中使用缩写快速生成 HTML。
- Babel：提升 JavaScript 语法高亮兼容性。
- ColorHighlighter：高亮颜色值，方便样式调试。
基本上就这些。Sublime 虽轻量，但配上合适的插件，写 Vue 同样流畅。关键是不卡、启动快，适合喜欢简洁编辑器的人。
