必须安装Vue Syntax Highlight插件、手动绑定.vue后缀为Vue Component、配置启用Vue 3及TS/SCSS嵌入支持，三步缺一不可；否则.vue文件将显示为白底黑字且script setup等语法无高亮。

装对插件、手动绑定后缀、配好嵌入规则，三步缺一不可；跳过任一环节，.vue 文件打开永远是白底黑字，不是 Sublime 坏了，是它根本没“认出”这是 Vue 文件。

必须安装 Vue Syntax Highlight，别输错名字

Sublime Text 4 下唯一持续维护、支持 <script setup lang="ts"></script> 和 的插件，只有 Vue Syntax Highlight——注意大小写、空格、复数 s 和大写 H，一个字符都不能错。

• 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Package Control: Install Package 回车
• 等列表加载完，**严格输入 Vue Syntax Highlight**（不是 vue syntax highlight、不是 VueJS、也不是 vue-component）
• 装完进 Preferences → Browse Packages…，确认存在 Vue Syntax Highlight/ 文件夹（不是 vuejs/ 或 vim-vue/）
• 如果已装错插件，控制台大概率报 ImportError: No module named 'sublime_plugin'，先用 Package Control: Remove Package 卸干净再重试

必须手动把 .vue 后缀绑定为 Vue Component

插件只提供语法定义文件 Packages/Vue Syntax Highlight/Vue.sublime-syntax，不会自动注册文件关联。没这步，插件等于没装。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 打开任意一个 .vue 文件
• 点击右下角当前语法名（比如显示 Plain Text）
• 选择 Open all with current extension as… → 找到并点击 Vue Component（注意：不是 Vue、不是 HTML、也不是 Vue Template）
• 如果菜单里压根没出现 Vue Component，说明插件没加载成功，按 Ctrl+` 查控制台报错；常见原因是 Package Control 版本太旧，需先升级

<script setup lang="ts"></script> 还是灰色？检查嵌入配置和子语言支持

Vue Syntax Highlight 本身不渲染 JS/TS/CSS，它靠 Sublime 的嵌入语法机制，把 <script></script> 块交给对应语言插件处理。灰色 ≠ Vue 插件坏了，是子语言链断了。

• 确认已安装对应语言插件：用 TypeScript 就装 JavaScriptNext - ES6 Syntax 或官方 TypeScript 插件；用 SCSS 就装 SCSS（作者 css415），并打开一个 .scss 文件确认右下角显示 SCSS
• 进 Preferences → Package Settings → Vue Syntax Highlight → Settings，在 User 配置中确保含：

  {
    "vue_version": "3",
    "enable_ts_in_script": true,
    "enable_vue_blocks": true,
    "enable_css_in_style": true
  }

• 不要改 Vue.sublime-syntax 文件——它自带嵌入声明，改错会导致整个语法崩溃
• 临时验证法：把 .vue 文件后缀临时改成 .js，看 <script></script> 区块是否恢复高亮；能恢复，就说明问题出在 Vue 层解析，不是底层 JS/TS 插件失效

最容易被忽略的是绑定后缀那一步——它只做一次，但不做就全白；还有 "vue_version": "3" 这个配置，老版本默认是 "2"，不改的话 defineProps、v-model:value 这类 Vue 3+ 特性会直接漏高亮。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！