介绍
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应用程序，绝对是一大利器！
