Ionic环境搭建 #

# 安装Homebrew（如果未安装）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 安装Node.js
brew install node

# 验证安装
node -v
npm -v

# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 安装LTS版本
nvm install --lts

# 使用LTS版本
nvm use --lts

# 验证安装
node -v
npm -v

# 安装Chocolatey（如果未安装）
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

# 安装Node.js
choco install nodejs-lts

# 验证安装
node -v
npm -v

# 使用NodeSource
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# 验证安装
node -v
npm -v

# 使用NodeSource
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

# 验证安装
node -v
npm -v

# 安装Ionic CLI
npm install -g @ionic/cli

# 验证安装
ionic -v

# 查看帮助
ionic --help

# 更新到最新版本
npm update -g @ionic/cli

# 查看当前版本
ionic --version

Capacitor架构
    │
    ├── Core - 核心运行时
    │
    ├── CLI - 命令行工具
    │
    └── Plugins - 原生插件
        ├── Official - 官方插件
        └── Community - 社区插件

# Capacitor通常随Ionic项目安装
# 也可以全局安装
npm install -g @capacitor/cli

# 验证安装
npx cap --version

# 安装Xcode命令行工具
xcode-select --install

# 安装CocoaPods
sudo gem install cocoapods

# 验证安装
pod --version

# 查看可用模拟器
xcrun simctl list devices

# 启动模拟器
open -a Simulator

# Ionic运行iOS模拟器
ionic cap run ios -l --external

# 使用Homebrew
brew install openjdk@17

# 配置环境变量
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk

# 使用Chocolatey
choco install openjdk17

# 或下载安装包
# https://adoptium.net/

java -version
javac -version

# Android SDK路径
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin

ANDROID_HOME=C:\Users\用户名\AppData\Local\Android\Sdk
Path添加:
  %ANDROID_HOME%\emulator
  %ANDROID_HOME%\platform-tools
  %ANDROID_HOME%\cmdline-tools\latest\bin

# 查看可用镜像
sdkmanager --list

# 创建模拟器
avdmanager create avd -n MyDevice -k "system-images;android-33;google_apis;x86_64"

# 启动模拟器
emulator -avd MyDevice

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.preferences.importModuleSpecifier": "relative",
  "ionic.preview.port": 8100
}

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Ionic Serve",
      "url": "http://localhost:8100",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

# 查看Ionic环境信息
ionic info

Ionic:

   Ionic CLI                     : 7.x.x
   Ionic Framework               : @ionic/angular 8.x.x
   @angular-devkit/build-angular : 17.x.x
   @angular-devkit/schematics    : 17.x.x
   @angular/cli                  : 17.x.x
   @ionic/angular-toolkit        : 11.x.x

Capacitor:

   Capacitor CLI      : 6.x.x
   @capacitor/core    : 6.x.x

Utility:

   cordova-res : not installed globally
   native-run  : 2.x.x

System:

   NodeJS : v20.x.x
   npm    : 10.x.x
   OS     : macOS Sonoma
   Xcode  : Xcode 15.x

# 创建测试项目
ionic start testApp blank --type=angular

# 进入项目目录
cd testApp

# 启动开发服务器
ionic serve

# 添加iOS平台
ionic cap add ios

# 添加Android平台
ionic cap add android

# 构建并同步
ionic build
npx cap sync

# 运行iOS
ionic cap run ios

# 运行Android
ionic cap run android

# 使用nvm切换Node版本
nvm install 18
nvm use 18

# 或使用nvm-for-windows（Windows）

# macOS/Linux修复npm权限
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

# 设置npm镜像
npm config set registry https://registry.npmmirror.com

# 设置Ionic镜像
ionic config set -g npmClient npm

# 重置Xcode命令行工具
sudo xcode-select --reset

# 重新安装命令行工具
sudo xcode-select --install

# 接受Android SDK许可
sdkmanager --licenses

# 更新SDK
sdkmanager --update