Vue 团队于 9 月发布了 Vue 3,当之无愧地大张旗鼓。凭借改进的性能、更小的包大小、新的 API 以及支持未来框架迭代的改进基础,难怪 Vue 社区很兴奋。

不幸的是,许多 UI 库还不兼容 Vue 3。如果您正在寻找一个可以立即投入生产的产品,请查看Ionic Vue,这是一个为 Vue 3 构建的包含 100 多个移动和桌面组件的 UI 库。让我们来看看它所提供的一切。

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

Ionic Framework 是一个开源 UI 工具包,专注于为原生 iOS、原生 Android 和 Web 构建高质量的应用程序!它是用 HTML、CSS 和 JavaScript 从头开始构建的,因此 Web 开发人员应该有宾至如归的感觉。这些组件允许开发人员在使用 Web 技术的同时构建原生体验。现在被数百万开发人员使用,Ionic为所有应用商店应用程序的 15% 以上提供支持。

[](https://res.cloudinary.com/practicaldev/image/fetch/s---e158ib4---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// dev-to-uploads.s3.amazonaws.com/i/ynoy3eko4qzkmme0h3u2.png)

Ionic Vue 是 Ionic 框架的原生 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 如何完成“Ionic for Everyone”里程碑的更多信息。

那不是全部。曾经希望您可以在多个平台上使用您最喜欢的 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 框架组件。首先,安装两个包:

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 为您服务。使用 Ionic 的官方跨平台原生运行时Capacitor,您可以将 Vue 3 应用程序部署为渐进式 Web 应用程序和 iOS/Android 应用程序,所有这些都来自同一个代码库。

Capacitor 还提供 API,其功能涵盖所有三个平台。下面是 Geolocation 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 应用程序,将它带到 iOS 和 Android 与 Capacitor。建立了一些整洁的东西?通过@IonicFramework与我们分享您的 Ionic Vue 应用程序。