一、Ionic 简介
Ionic 是一个基于 Web 技术（HTML、CSS、JavaScript）的跨平台移动应用开发框架，结合 Angular、React 或 Vue 可快速构建 iOS 和 Android 应用。Ionic 提供丰富的 UI 组件、命令行工具及原生插件封装，广泛用于混合应用开发。
二、安装前准备
2.1 安装 Node.js（>=14.x）
访问官网：https://nodejs.org/
安装完成后验证：
node -v
npm -v
2.2 安装 Git（可选）
用于版本管理与插件下载：
- 下载地址：https://git-scm.com/
三、安装 Ionic CLI
使用 npm 全局安装：
npm install -g @ionic/cli
安装完成后验证：
ionic --version
四、创建 Ionic 项目
4.1 创建项目（以 Angular 为例）
ionic start myApp blank --type=angular
cd myApp
4.2 运行开发服务器
ionic serve
打开浏览器访问：http://localhost:8100
五、项目结构说明
src/：应用源码src/app/：页面、组件与路由逻辑src/theme/：样式文件ionic.config.json：项目配置capacitor.config.ts：原生配置（Capacitor）
六、构建和运行原生应用
6.1 添加 Capacitor 支持（默认已集成）
ionic build
npx cap add android
npx cap add ios
6.2 运行原生项目
npx cap open android
npx cap open ios
iOS 需在 macOS 上使用 Xcode。
七、添加插件示例
npm install @capacitor/camera
npx cap sync
在代码中使用：
import { Camera, CameraResultType } from '@capacitor/camera';
const image = await Camera.getPhoto({
quality: 90,
resultType: CameraResultType.Uri
});
八、常见问题
Q1: ionic serve 报错？
请检查是否进入项目目录，并执行了 npm install。
Q2: 无法打开 Android 项目？
请确认已安装 Android Studio，并配置了环境变量（如 ANDROID_HOME）。
九、学习资源推荐
- Ionic 官方文档
- Capacitor 插件库
- Ionic GitHub
- 《Ionic 实战指南》
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
