Vue Designer是唯一支持.vue文件实时预览的VSCode工具，但需禁用Vetur、启用Volar，且sharedStyles路径须为工作区根目录下的真实CSS文件，不支持别名、SCSS或相对路径开头的点。
Vue 组件在 VSCode 里改完代码还得切浏览器刷新？别折腾 Live Preview 或 Live Server 了——它们根本跑不起来 .vue 文件。真正能边写边看的，只有 Vue Designer，但前提是关掉 Vetur、配对 Volar，且 sharedStyles 路径不能带点、不能用别名、不能是 SCSS。
为什么 Vue Designer 预览区空白或报 ReferenceError: ref is not defined
核心冲突来自语言服务劫持：Vetur 和 Volar 不能共存，而 Vetur 会覆盖 Vue 文件的语言模式，导致 Vue Designer 拿不到正确的类型上下文和响应式 API 注入环境。
- 必须禁用已安装的
Vetur扩展（设置里搜vetur→ 点“禁用”） - 确认已安装
Volar（全名：Vue Language Features）和Vue Designer - 重启 VSCode 后再打开
.vue文件，否则旧语言服务缓存还在 - 如果仍报
ref is not defined，检查script setup是否用了defineProps/defineEmits但没加import——Volar不自动注入这些，需显式引入或启用takeOverMode
vueDesigner.sharedStyles 怎么配才生效
这个配置只加载纯 CSS，路径必须从工作区根目录开始算，不支持 ~ 别名、不解析 @import、不编译预处理器。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 正确写法：
"src/styles/reset.css"、"src/assets/css/theme.css" - 错误写法：
"./src/styles/reset.css"（开头的.会导致解析失败）、"src/styles/index.scss"（.scss 不被直接加载）、"~/styles/reset.css"（~是 webpack/vite 别名，VSCode 不识别） - 确保这些 CSS 文件是构建后已存在的真实文件，不是源码里的 SCSS/LESS；如果项目用 Vite，建议在
src/styles下单独放一份编译好的reset.css - 配置位置：项目根目录下
.vscode/settings.json，不是用户全局设置
为什么 Live Preview / Live Server 对 Vue 组件完全无效
它们压根不理解 .vue 单文件组件结构，也不执行构建流程，所有逻辑都卡在第一步。
立即学习“前端免费学习笔记（深入）”；
-
Live Preview只认.html，右键点.vue文件 → “Open with Live Preview” 会显示空白页，控制台报Uncaught SyntaxError: Cannot use import statement outside a module -
Live Server只起静态 HTTP 服务，不会运行vite或vue-cli-service，所以<script setup>、defineComponent全部无法解析 - 强行用这两个工具，常见报错还有：
Failed to resolve component、Unknown custom element、Cannot find module 'vue' - 真要测路由或跨组件交互，就该跑
npm run dev，然后手动访问http://localhost:5173
最常被忽略的一点：预览失效往往不是插件坏了，而是 Vetur 没彻底禁用，或者 sharedStyles 路径指向了一个不存在的 CSS 文件——VSCode 不报错，只是静默跳过加载，结果样式全乱、字体崩塌、间距归零，你以为是插件问题，其实只是路径少了个 s。
