介绍

Ionic Framework 是一个开源 UI 工具包，用于使用 Web 技术（HTML、CSS 和 JavaScript）构建高性能、高质量的移动端和桌面端应用程序，并集成了 Angular、React 和 Vue 等流行框架。

Github

https://github.com/ionic-team/ionic-framework

特性

Ionic Framework 专注于应用程序的前端 UX 和 UI 交互——UI 控件、交互、手势、动画。它易于学习，并与其他库或框架集成，例如 Angular、React 或 Vue。或者，它可以在没有任何前端框架的情况下使用简单的脚本独立使用，本文介绍Ionic的一大原因并不是其跨平台能力，而是因为其移动端UI的支持，使得其实成为构建移动端Web应用的一大利器！

• 一套代码，多端运行

Ionic让Web 开发人员能够从单个代码库为所有主要应用程序和移动端 Web 构建应用程序。借助自适应样式，Ionic 应用程序在每台设备上都具有优秀的外观和体验。

• 专注性能

Ionic 旨在通过最佳实践（如高效的硬件加速转换和触摸优化手势）在最新的移动设备上表现出色。

• 干净、简单、实用的设计

Ionic的设计是为了在目前所有的移动设备和平台上工作和精美的UI展现。有了现成的组件、排版和一个高颜值的（但可扩展的）基础主题，它可以适应每个平台。

• Native和Web优化

Ionic 模拟本机应用程序 UI ，并使用本机 SDK，将本机应用程序的 UI 标准和设备功能与网络灵活地结合在一起。 Ionic 使用 Capacitor（或 Cordova）进行本地部署，或作为 Progressive Web App （PWA）在浏览器中运行。

安装使用

本文以在Vue3中使用为例，进行一个简单的演示，首先安装脚手架工具：

npm install -g @ionic/cli
//或者
yarn global add @ionic/cli

//创建应用
ionic start myApp tabs --type vue

//启动
cd myApp
ionic serve

创建应用会自动下载开发环境的依赖包，第一次创建可能稍慢，可以耐心等待一会

项目的目录结构如下：

熟悉的Vue3代码：

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';

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

我们按照如上命令启动程序：

以下是在真机上浏览器打开的效果

这样第一个demo程序就启动了，非常的简单

组件

这里我们通过截图简单了解一下其组件，轻微感受下，真机感受更优秀

组件非常丰富，满足绝大多数场景的需求，以上知识其中很小一部分截图，完整的组件可以到官方文档中查看。

总结

Ionic不仅仅是Web，还可以打包成安卓应用、iOS应用以及桌面、PWA应用，可谓是兼顾所有平台了，虽然在国内使用不多，但是使用其开发移动端Web应用程序，绝对是一大利器！