Ionic Vue:Vue 3 的 UI 库

类好啊
1,232 阅读4分钟

Vue 团队发布了 Vue 3，凭借改进的性能、更小的包大小、新的 API 以及支持未来框架迭代的改进基础,难怪 Vue 社区很兴奋。Ionic Vue,这是一个为 Vue 3 构建的包含 100 多个移动和桌面组件的 UI 库。让我们来看看它所提供的一切。

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

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

image.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>

入门

创建一个支持 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 应用程序。

avatar
文章
阅读
粉丝