要配置Sublime Text的Vue开发环境，需先安装Package Control，再通过它安装Vue Syntax Highlight插件实现语法高亮，接着设置.vue文件默认打开方式为Vue Component，可选装Emmet、Babel等辅助插件，最后创建测试文件验证HTML、JS、CSS高亮效果。
要在 Sublime Text 中配置 Vue 开发环境并实现语法高亮，需要安装支持 Vue 文件的插件。Vue 单文件组件（.vue 文件）包含 template、script 和 style 三部分，原生 Sublime 并不识别，需通过插件来实现语法高亮和代码提示。
1. 安装 Package Control（如未安装）
Package Control 是 Sublime 的插件管理工具，绝大多数插件都通过它来安装。
按下 Ctrl+` 打开控制台，粘贴以下代码并回车：
import urllib.request,os,hashlib; h = '6f4c264a24d0fbca757c9b856ee7a980' + 'eacac354d17475c194b6fb3500e68dc'; 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.replace(' ', '%20')).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)重启 Sublime 即可看到 Preferences 菜单下出现 Package Control。
立即学习“前端免费学习笔记（深入）”；
2. 安装 Vue 语法高亮插件
推荐使用 Vue Syntax Highlight 插件，它专为 .vue 文件设计，支持 HTML、JavaScript、CSS/SCSS/Less 等嵌套语法高亮。
安装步骤：
- 按下 Ctrl+Shift+P 打开命令面板
- 输入 Install Package 并选择
- 搜索 Vue Syntax Highlight
- 点击安装
安装完成后，打开 .vue 文件即可看到语法高亮生效。
3. 设置 .vue 文件默认打开方式
如果打开 .vue 文件时没有自动启用 Vue 语法，可以手动设置：
- 打开一个 .vue 文件
- 点击右下角显示的语法类型（如“Plain Text”）
- 选择 Open all with current extension as...
- 找到并选择 Vue Component
之后所有 .vue 文件都会默认用 Vue 语法高亮显示。
4. 可选：安装其他辅助插件
提升开发体验，可额外安装：
- Emmet：支持模板中的快速 HTML 编写
- Babel：增强 JavaScript 语法高亮（与 Vue 插件兼容）
- AutoFileName：自动补全文件路径
- ColorHighlighter：颜色值实时预览
5. 验证配置效果
创建一个测试文件 App.vue：
<template><div class="app">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello Vue in Sublime'
}
}
}
</script>
<style scoped>
.app {
color: #42b983;
}
</style>
保存后查看各部分是否正确高亮：HTML、JS、CSS 应分别呈现对应语法颜色。
基本上就这些。Sublime 虽不如 VS Code 对 Vue 原生支持强，但搭配合适插件也能胜任基础开发。重点是装好 Vue Syntax Highlight 并正确关联文件类型，就能获得不错的编辑体验。
