@astrojs/vue
此 Astro 集成 为你的 Vue 3 组件启用服务器端渲染和客户端水合。
安装
标题部分 安装有两种方式可以将集成添加到你的项目当中，先让我们从最方便的方式来入手！
astro add 命令
标题部分 astro add 命令Astro 包含一个 CLI 工具来提供一等集成支持，astro add 这个命令将会：
- 安装所有必须的依赖和对等依赖（可选）
- 更新你的
astro.config.*文件，以应用当前的集成（同样可选）
安装 @astrojs/vue，需要在你的项目工程中依次运行以下命令：
# 使用 NPMnpx astro add vue# 使用 Yarnyarn astro add vue# 使用 PNPMpnpm astro add vue如果你有任何问题, 欢迎随时在 GitHub 上开个 issue 来向我们报告 然后尝试执行以下的手动安装步骤。
手动安装依赖项
标题部分 手动安装依赖项首先像下面这样安装 @astrojs/vue 集成：
npm install @astrojs/vue大多数包管理器将会安装关联的对等依赖，如果你在启动 Astro 的时候仍然遇到 “Cannot find package ‘vue’” 或者相似的警告，你将需要手动安装 Vue：
npm install vue现在，使用 integrations 属性来应用你的集成到 astro.config.* 文件：
import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({ // ... integrations: [vue()],});入门
标题部分 入门要在 Astro 使用你的 Vue 组件，你可以移步我们的 UI 框架文档。 你将会了解到：
- 📦 如何加载框架组件
- 💧 客户端合成注水选项
- 🤝 将框架混合和嵌套在一起的时机
疑难解答
标题部分 疑难解答如需帮助，请查看我们在 Discord 上的 #support 频道。 我们友好的支持小队成员随时为你提供帮助!
你也可以查看我们的 Astro 集成文档 以获取集成的更多信息.
贡献
标题部分 贡献该 Astro 包是由核心团队维护的，欢迎提交 issue 和 PR！
选项
标题部分 选项此集成由 @vitejs/plugin-vue 提供支持。要定制 Vue 编译器, 你可以为集成提供选项。查看 @vitejs/plugin-vue 文档 获取更多详细内容。
import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({ // ... integrations: [ vue({ template: { compilerOptions: { // 将任意以 ion- 开头的标签当做自定义元素 isCustomElement: (tag) => tag.startsWith('ion-'), }, }, // ... }), ],});appEntrypoint
标题部分 appEntrypoint你可以拓展 Vue app 实例并将 appEntrypoint 选项设置为一个相对根目录的导入标识符 (例如： appEntrypoint: "/src/pages/_app")。
此文件的默认导出应该是一个接收 Vue App 实例的函数，允许使用 自定义 Vue 插件，app.use 和其他高级使用情形的定制。
import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({ integrations: [vue({ appEntrypoint: '/src/pages/_app' })],});import type { App } from 'vue';import i18nPlugin from 'my-vue-i18n-plugin';
export default (app: App) => { app.use(i18nPlugin);};jsx
标题部分 jsx你可以通过设置 jsx: true 来使用 Vue JSX。
import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({ integrations: [vue({ jsx: true })],});这将会为 Vue 和 Vue JSX 组件 开启渲染，要定制 Vue JSX 编译器的话，可以把传递的选项由布尔值改为对象，查阅 @vitejs/plugin-vue-jsx 文档 获取更多细节内容。
import { defineConfig } from 'astro/config';import vue from '@astrojs/vue';
export default defineConfig({ integrations: [ vue({ jsx: { // 将任意以 ion- 开头的标签当做自定义元素 isCustomElement: (tag) => tag.startsWith('ion-'), }, }), ],});
