Ionic Vue：Vue 3 的 UI 库

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

Vue 团队在 9 月份发布了 Vue 3，可谓实至名归。Vue 3 性能更佳、包体积更小、新增了 API，并且对底层架构进行了全面改进以支持未来的框架迭代，难怪 Vue 社区如此兴奋。

遗憾的是，目前很多 UI 库还不兼容 Vue 3。如果您正在寻找一款可以立即用于生产环境的 UI 库，那么不妨了解一下Ionic Vue，它拥有超过 100 个专为 Vue 3 构建的移动和桌面组件。让我们一起来看看它都提供了哪些功能。

Ionic Vue：Ionic 框架的原生 Vue 版本

Ionic Framework 是一款开源 UI 工具包，专注于构建高质量的 iOS、Android 和 Web 原生应用！它完全基于 HTML、CSS 和 JavaScript 构建，因此 Web 开发者会感到非常熟悉。其组件允许开发者使用 Web 技术构建原生体验。如今，数百万开发者都在使用 Ionic，它为超过 15% 的应用商店应用提供支持。

Ionic Vue 是 Ionic Framework 的原生 Vue 版本。它封装了核心 UI 组件库（恰如其名@ionic/core），使 Ionic 能够轻松支持所有 Vue 3 特性。以下是 Ionic Vue 应用的入口点：

// Vue 3 component definition
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  }
});

<!-- Template with Ionic Framework UI components -->
<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

正如你所见，它是用现代 Web 代码编写的。Ionic 喜欢说，你不需要学习Ionic 本身——你可以利用你现有的 Web 开发技能，使用他们的 UI 组件来构建应用程序。

Vue 3 已准备就绪，可用于生产环境

Ionic 团队在 Vue 3 发布后不久就推出了 Ionic Vue。其他库还在实现对 Vue 3 的支持，那么 Ionic 是如何做到如此快速发布的呢？答案是：所有 Ionic Framework 的 UI 组件都是 Web 组件，供使用官方框架绑定（包括 Angular、React、Vue 以及市面上几乎所有其他 JavaScript 框架，无论现在还是将来）的 Web 开发者使用。使用每个框架的开发者都能获得他们熟悉的体验，例如框架的路由系统、生命周期事件、官方 API 和工具等等。坦白说，这是双赢！点击此处了解更多关于 Ionic 如何实现“人人可用”这一里程碑的信息。

但这还不是全部。你是否曾希望在多个平台上使用你最喜欢的 UI 库，却因为这些库没有充分利用各个平台的特定设计语言而无法实现？好消息来了！每个 Ionic 组件都会根据应用运行的平台自动调整外观，例如 iOS 上的 Cupertino 和 Android 上的 Material Design。通过这些平台间的细微设计调整，开发者可以实现原生应用的视觉效果，而用户也能获得高质量的应用体验。这种适配是自动进行的，并且完全可配置，方便你根据品牌需求进行主题定制。

入门

使用 Vue 3 创建 Ionic 应用非常简单。首先安装 Ionic CLI：

npm install -g @ionic/cli@latest

接下来，创建一个 Ionic Vue 应用：

ionic start my-vue-app --type vue

回答几个问题后，您可以使用以下命令启动本地开发服务器ionic serve。该命令使用 Vue CLI 编译您的应用程序，启动开发服务器，并在新的浏览器窗口中打开您的应用程序。

从这里，您可以探索 Ionic 的100 多个 UI 组件，或者学习涵盖 Ionic 核心应用开发概念的“第一个应用”教程。

将 Ionic Vue 添加到现有的 Vue 3 应用中

如果您已经开始开发 Vue 3 应用，您可以添加 Ionic Framework 组件。首先，安装以下两个软件包：

npm install @ionic/vue @ionic/vue-router

之后，将该IonicVue软件包添加到您的应用程序中。

// main.js
import { IonicVue } from '@ionic/vue';
import App from './App.vue'
import router from './router';

const app = createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');
});

最后，还需要进行一些路由和 CSS 方面的小改动。完成这些步骤后，就可以开始将 Ionic 的组件添加到你的 Vue 3 应用中了。

额外福利：将您的 Vue 3 应用部署到移动设备

你已经构建了一个优秀的 Vue 3 应用，它在 Web 和桌面端运行良好。那么原生移动应用呢？Ionic 再次为你提供了解决方案。借助Capacitor（Ionic 官方的跨平台原生运行时），你可以使用同一套代码库，将 Vue 3 应用部署为渐进式 Web 应用 (PWA)和iOS/Android 应用。

Capacitor 还提供涵盖所有三个平台功能的 API。例如，以下是地理位置 API：

// Capacitor Geolocation plugin example
setup() {
  const locationData = ref({});

  const getLocation = async () => {
    const { Geolocation } = Plugins;
    const results = await Geolocation.getCurrentPosition();

    locationData.value = {
      lat: results.coords.latitude,
      long: results.coords.longitude
      };
    };
  return { locationData, getLocation };
}

<ion-button @click="getLocation()">Where am I?</ion-button>
<p>{{ locationData }}</p>

请注意，代码中并没有针对每个平台（“web”、“iOS”或“Android”）编写单独的逻辑。这是因为 Capacitor 会自动检测应用运行的平台，然后调用相应的原生层代码。凭借这些核心 API，以及对原生 SDK 的完全访问权限和不断增长的社区支持插件库，Capacitor 使您能够从 Vue 3 项目构建真正的原生移动应用。

开始构建适用于 Web 和移动设备的出色 Vue 3 应用

如果你一直因为想等更多库兼容而迟迟没有尝试 Vue 3，那么现在正是体验 Ionic Vue 的好时机。借助 Ionic，你可以构建功能齐全的应用，然后使用 Capacitor 将其部署到多个平台。

想要更深入地了解 Ionic Vue，我们建议您查看我们的快速入门指南。想要获得更丰富的实践经验，请查看我们的“构建你的第一个应用”指南。如果您已经有一个 Vue 3 应用，可以使用 Capacitor 将其移植到 iOS 和 Android 平台。开发出了很棒的应用？欢迎通过@IonicFramework与我们分享您的 Ionic Vue 应用。