@astrojs/ vue

此 Astro 集成 能为你的 Vue 3 组件启用服务端渲染和客户端激活。

安装

Astro 包含一个 astro add 命令来自动设置官方集成。如果你愿意，也可以手动安装集成。

要安装 @astrojs/vue，请在你的项目目录中运行以下命令并按照提示操作：

npx astro add vue

pnpm astro add vue

yarn astro add vue

如果你遇到任何问题，请随时在 GitHub 上向我们报告，并尝试下面的手动安装步骤。

手动安装

首先，安装 @astrojs/vue 包：

npm install @astrojs/vue

pnpm add @astrojs/vue

yarn add @astrojs/vue

大多数包管理器也会安装相关的对等依赖。如果在启动 Astro 时看到 Cannot find package 'vue'（或类似）的警告，你需要安装 Vue：

npm install vue

pnpm add vue

yarn add 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: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: (tag) => tag.startsWith('ion-'),
        },
      },
      // ...
    }),
  ],
});

appEntrypoint

你可以通过将 appEntrypoint 选项设置为一个相对于根目录的导入说明符（例如 appEntrypoint: "/src/pages/_app"）来扩展 Vue 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: 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: {
        // treat any tag that starts with ion- as custom elements
        isCustomElement: (tag) => tag.startsWith('ion-'),
      },
    }),
  ],
});

devtools

添加于： @astrojs/vue@4.2.0

你可以在开发中通过向 vue() 集成配置传递一个带有 devtools: true 的对象来启用 Vue DevTools：

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue';

export default defineConfig({
  // ...
  integrations: [vue({ devtools: true })],
});

自定义 Vue DevTools

添加于： @astrojs/vue@4.3.0

要进行更多自定义，你可以传递 Vue DevTools Vite 插件支持的选项。（注意：不支持 appendTo。）

例如，如果你不使用 Visual Studio Code，可以将 launchEditor 设置为你偏好的编辑器：

import { defineConfig } from "astro/config";
import vue from "@astrojs/vue";

export default defineConfig({
  // ...
  integrations: [
    vue({
      devtools: { launchEditor: "webstorm" },
    }),
  ],
});