安装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” 即可启用高亮。
该插件支持 、<script>、<style> 区块的分别高亮，html、javaScript、css/scss 都能正确着色。</script>
立即学习“前端免费学习笔记（深入）”；
配置代码片段（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 同样流畅。关键是不卡、启动快，适合喜欢简洁编辑器的人。