文心快码插件需手动配置预览服务才能实现实时渲染：先确保插件激活并打开含html/vue/jsx文件的项目，再通过状态栏图标或快捷键启动端口为5001的预览服务，html需注入preview.js脚本（vue/react项目可配wenxin.config.js免注入）。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
文心快码插件安装后，前端代码修改需立即看到渲染效果，但默认不启用实时预览，必须手动配置开发服务器与插件通信通道才能生效。
确认插件已正确加载
启动文心快码插件后，在 VS Code 状态栏右下角查找「Wenxin QuickCode」图标；若图标为灰色或缺失，说明插件未激活——此时需重启 VS Code 并确保工作区已打开一个含 【.html/.vue/.jsx 文件】 的前端项目文件夹。
点击该图标，弹出菜单中应显示「Start Preview Server」选项；若无此选项，代表插件识别失败，需检查当前文件是否被排除在工作区之外（如位于 node_modules 或 .gitignored 路径）。
启动内置预览服务
方法一：点击状态栏 Wenxin QuickCode 图标 → 选择「Start Preview Server」→ 等待右下角提示「Preview server listening on http://localhost:5001」。
方法二：快捷键触发（Windows/Linux：Ctrl+Shift+P → 输入「Wenxin: Start Preview Server」→ 回车）；macOS 用户用 Cmd+Shift+P 替代。
这一步必须在项目根目录执行，否则服务无法读取 vite.config.ts 或 webpack.config.js 中的 alias、public 路径等配置，导致资源 404。若项目使用自定义端口（如 vite 配置了 port: 3000），预览服务仍强制绑定 5001 —— 不会自动适配，也不支持改端口。
配置 HTML 文件自动注入预览脚本
第一步：打开任意 .html 文件，在 标签内插入以下代码：
<script src="http://localhost:5001/preview.js"></script>
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
第二步：保存文件，刷新浏览器页面（需通过 http://localhost:5001 打开，不能直接双击打开 file:// 协议页面）。
第三步：修改任意 JS/HTML/CSS 内容并保存，观察浏览器是否自动刷新——若无反应，检查浏览器控制台是否有「Failed to load resource: net::ERR_CONNECTION_REFUSED」报错，说明预览服务未运行或被防火墙拦截。
【必须关闭所有其他占用 5001 端口的进程】，例如旧版 Live Server、Python 的 SimpleHTTPServer、或其他调试工具；否则文心快码预览服务无法绑定端口，且不会给出明确错误提示。
Vue/React 项目免注入配置（推荐）
对于 Vue CLI 或 Vite 创建的项目，无需手动添加 script 标签。
步骤一：在项目根目录创建 wenxin.config.js 文件，内容为：
module.exports = { preview: { enabled: true, injectScript: false } };
步骤二：重新运行「Start Preview Server」，插件将自动检测该配置并接管 dev server 的 HMR 通道。
步骤三：此时修改组件逻辑，浏览器不仅刷新视图，还会保留 vuex/pinia 状态及 React useState 的当前值——这是区别于普通页面刷新的核心能力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
