此页面介绍了 Ionic Framework 如何通过 @ionic/vue 和 @ionic/vue-router 包与 Vue.js 应用程序集成。这些包提供了 Ionic 核心 Web Components 的 Vue 特定封装器，使其能够与 Vue 的组件系统和响应式架构无缝协同工作。有关 Angular 集成的详细信息，请参阅 Angular 集成，有关 React 集成的详细信息，请参阅 React 集成部分。
Vue 集成包含两个主要包
Vue 集成使用 @stencil/vue-output-target 自动生成所有 Ionic 组件的 Vue 组件封装器，使它们能够像原生 Vue 组件一样工作。
来源
要使用 Ionic 和 Vue，您需要安装必要的包并在 Vue 应用程序中注册 Ionic 组件。
Vue 集成同时需要 @ionic/vue 和 vue-router 包。对于导航功能，您还需要 @ionic/vue-router。当前版本的 @ionic/vue 与 Vue 3 兼容。
来源
Ionic Vue 在核心 Web Components 之上提供了组件封装器，使它们能够与 Vue 的响应式系统和组件生命周期无缝配合。
所有 Ionic Web Components 都会被自动封装为 Vue 组件。这些组件代理会处理
封装过程确保 Ionic 组件的行为与原生 Vue 组件一致，例如具有响应式 prop 和正确的事件处理。
来源
Ionic Vue Router 扩展了 Vue Router，提供了具有动画、手势和标签页导航的移动端导航体验。
IonRouterOutlet 组件作为路由视图的容器，并管理视图过渡。与标准的 Vue Router 视图不同，IonRouterOutlet
在 IonRouterOutlet 中渲染的 Vue 组件会接收特定的生命周期事件
| 生命周期钩子 | 描述 |
|---|---|
ionViewWillEnter | 在组件即将进入视图动画时触发 |
ionViewDidEnter | 在组件完成进入视图动画后触发 |
ionViewWillLeave | 在组件即将离开视图动画时触发 |
ionViewDidLeave | 在组件完成离开视图动画后触发 |
来源
Ionic 通过 IonTabs 和 IonTabBar 提供了专门用于标签页导航的组件。
IonTabs 组件与 Vue Router 协同工作，提供标签式界面，其中每个标签页对应应用程序中的一个路由。IonTabBar 组件渲染标签页按钮，而 IonTabs 内的 IonRouterOutlet 渲染活动标签页的内容。
来源
Ionic 提供了多种叠加组件，如模态框、弹出框和警报框。在 Vue 集成中，这些组件被封装以提供 Vue 特定的 API。
Ionic Vue 中的叠加组件遵循控制器模式，提供诸如以下之类的钩子
useIonModal()useIonAlert()useIonActionSheet()useIonPopover()useIonLoading()useIonToast()这些钩子允许您以编程方式创建、呈现和关闭叠加组件。
来源
Vue 集成正在积极维护并定期更新。近期更改包括
当前版本的 @ionic/vue (8.5.5) 需要
来源
以下是一个设置 Ionic Vue 应用程序的基本示例
该集成无缝地将 Vue 的响应式系统与 Ionic 的 UI 组件相结合，使您能够构建遵循 Vue 和 Ionic 模式的移动应用程序。
这种结构允许使用 Ionic 特定的导航，同时利用熟悉的 Vue Router 模式来定义路由和导航。
来源
Ionic Vue 集成提供了一种无缝的方式在 Vue 应用程序中使用 Ionic 组件和导航模式。通过将 Vue 的响应式系统与 Ionic 的 UI 组件和移动导航模式相结合，开发人员可以构建利用两个框架优势的跨平台应用程序。