> ## Documentation Index > Fetch the complete documentation index at: https://extension.js.org/llms.txt > Use this file to discover all available pages before exploring further. # 在浏览器扩展中使用 Vue.js > 用 Vue 单文件组件搭建扩展 UI。Extension.js 会从依赖中检测 Vue，并配置 SFC 编译和别名。 Extension.js 会从依赖中检测 Vue，并自动配置单文件组件（SFC）的编译、框架别名以及开发期的更新行为。scoped 样式、Composition API 和 ` ``` ```ts theme={null} import { createApp } from "vue"; import App from "./App.vue"; createApp(App).mount("#app"); ``` ```vue theme={null} ``` ### 在 `content_script` 文件中 对于 content script，把 Vue 应用挂载到注入的根节点上： ```ts theme={null} import { createApp } from "vue"; import App from "./App.vue"; import "./content.css"; const rootDiv = document.createElement("div"); rootDiv.id = "extension-root"; document.body.appendChild(rootDiv); createApp(App).mount("#extension-root"); ``` ## 最佳实践 * 让 UI 入口保持框架优先（`main.ts`、`App.vue`），把扩展 API 放在专用模块里。 * 尽量在 SFC 中使用 scoped 样式，减少扩展页面里的样式泄漏。 * 对于大型 UI，拆分组件并抽取共享的 composable，让 content script 保持精简。 ## 下一步 * 进一步了解 [TypeScript 支持](/docs/languages-and-frameworks/typescript)。 * 探索 [Sass 和 Sass 模块](/docs/languages-and-frameworks/sass)。 ## 视频讲解