Vue Designer可实现VSCode内Vue组件实时预览，需禁用Vetur、启用Volar，配置正确的sharedStyles路径（如"src/styles/reset.css"），避免使用Live Preview或Live Server。
VSCode 里想边写 Vue 组件边看效果，别硬刷浏览器——关键不是装一堆插件，而是选对工具链并配对正确。
Vue Designer 能直接预览 .vue 文件，但必须关掉 Vetur
Volar 和 Vue Designer 是当前最兼容的组合；Vetur 会劫持 Vue 文件的语言服务，导致 Vue Designer 的实时渲染面板无法解析 setup 语法或响应式变量绑定，预览区常为空白或报 ReferenceError: ref is not defined。
- 打开 VSCode 设置（
Ctrl+,），搜索vetur，禁用已安装的 Vetur 扩展 - 确认已安装
Volar（Vue Language Features）和Vue Designer - 重启 VSCode，再打开任意
.vue文件，用Ctrl+Shift+P→Open Vue Designer启动预览
sharedStyles 配置不生效？路径必须是相对项目根目录的字符串数组
如果你的组件依赖全局重置样式或主题 CSS，但预览里字体/间距/颜色全乱了，大概率是 vueDesigner.sharedStyles 路径写错了。它不支持 glob 模式、不识别 ~ 别名，且路径必须从工作区根开始算起。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 错误写法：
"src/styles/index.scss"（.scss 不被直接加载）、"./src/styles/reset.css"（带.前缀会失败） - 正确写法：
"src/styles/reset.css"、"src/assets/css/theme.css" - 确保这些 CSS 文件是纯 CSS 或已由构建工具（如 Vite）编译为 CSS，不能含未处理的
@import或变量
Live Preview / Live Server 对 Vue 无效，别浪费时间配置
Live Preview 只认 .html，Live Server 只起静态服务——它们都看不到 <template> 里的逻辑，也无法执行 defineComponent 或 setup()。强行用会导致：空白页、Uncaught SyntaxError: Cannot use import statement outside a module、Failed to resolve component 等错误。
立即学习“前端免费学习笔记（深入）”；
- 不要给
.vue文件右键点 “Open with Live Preview” - 不要在 Vue 项目里用
Live Server启动 —— 它根本不会运行vite或vue-cli-service - 真要调试路由或跨组件交互，就该跑
npm run dev，然后用浏览器访问http://localhost:5173
真正卡住人的从来不是“怎么打开预览”，而是预览里数据没更新、事件不触发、样式漏加载——这些问题基本都出在语言服务冲突或路径配置偏差上，而不是插件本身坏了。
