Ionic 安装使用教程

一、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面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。