# 全局安装 Ionic CLI
npm install -g @ionic/cli
 
# 创建新项目（Angular）
ionic start myApp tabs --type=angular
 
# 创建新项目（React）
ionic start myApp tabs --type=react
 
# 创建新项目（Vue）
ionic start myApp tabs --type=vue
 
# 进入项目
cd myApp
 
# 启动开发服务器
ionic serve

npm install @ionic/angular@latest
 
# 或者使用 yarn
yarn add @ionic/angular

npm install @ionic/react@latest

npm install @ionic/vue@latest

npm install @ionic/core@latest

import { IonicModule } from '@ionic/angular';
 
@NgModule({
  imports: [
    IonicModule.forRoot()
  ]
})
export class AppModule {}

import { setupIonicReact } from '@ionic/react';
import '@ionic/react/css/core.css';
 
setupIonicReact();

import { createApp } from 'vue';
import { IonicVue } from '@ionic/vue';
import App from './App.vue';
 
const app = createApp(App);
app.use(IonicVue);
app.mount('#app');

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>我的应用</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-button expand="full">点击我</ion-button>
  </ion-content>
</ion-app>

import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/react';
 
function App() {
  return (
    <IonApp>
      <IonHeader>
        <IonToolbar>
          <IonTitle>我的应用</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonButton expand="full">点击我</IonButton>
      </IonContent>
    </IonApp>
  );
}
 
export default App;

<template>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>我的应用</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-button expand="full">点击我</ion-button>
    </ion-content>
  </ion-app>
</template>
 
<script setup>
import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/vue';
</script>

<ion-button mode="ios">iOS 风格</ion-button>
<ion-button mode="md">Material Design 风格</ion-button>

# 添加原生平台
npm install @capacitor/core @capacitor/cli
npx cap add android
npx cap add ios
 
# 同步 Web 资源到原生项目
npx cap sync
 
# 打开原生 IDE
npx cap open android
npx cap open ios

:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #0cd1e8;
  --ion-color-tertiary: #7044ff;
  --ion-color-success: #10dc60;
  --ion-color-warning: #ffce00;
  --ion-color-danger: #f04141;
  --ion-color-dark: #121212;
  --ion-color-medium: #989aa2;
  --ion-color-light: #f4f5f8;
  
  /* 暗色模式 */
  --ion-background-color: #000;
  --ion-text-color: #fff;
}

document.body.classList.toggle('dark-mode');

# 使用 Ionic CLI 创建项目
ionic start myApp tabs
 
# 选择框架
# ? Framework: (Use arrow keys)
#   ❯ Angular
#     React
#     Vue

# 启动开发服务器
ionic serve
 
# 在浏览器中打开
# http://localhost:8100
 
# 使用 Ionic Lab 多平台预览
ionic serve --lab

# Angular
ionic build --prod
 
# React
ionic build
 
# Vue
ionic build

# 安装 Capacitor
npm install @capacitor/core @capacitor/cli
 
# 添加平台
npx cap add android
npx cap add ios
 
# 同步资源
npx cap sync
 
# 打开原生 IDE
npx cap open android
npx cap open ios

# 在 Android 设备上运行
ionic capacitor run android
 
# 在 iOS 模拟器上运行
ionic capacitor run ios
 
# 实时重载
ionic capacitor run android -l --external

// components/MyComponent/index.ts
export { default } from './MyComponent';
export * from './MyComponent';
 
// components/MyComponent/MyComponent.tsx
import { IonCard, IonCardHeader, IonCardTitle } from '@ionic/react';
 
export const MyComponent = () => {
  return (
    <IonCard>
      <IonCardHeader>
        <IonCardTitle>标题</IonCardTitle>
      </IonCardHeader>
      {/* ... */}
    </IonCard>
  );
};

// services/api.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable()
export class ApiService {
  constructor(private http: HttpClient) {}
  
  async getData() {
    return this.http.get('/api/data').toPromise();
  }
}

// models/user.model.ts
export interface User {
  id: number;
  name: string;
  email: string;
  avatar?: string;
}

// store/actions/user.actions.ts
import { createAction, props } from '@ngrx/store';
import { User } from '../../models/user.model';
 
export const loadUsers = createAction('[User] Load Users');
export const loadUsersSuccess = createAction(
  '[User] Load Users Success',
  props<{ users: User[] }>()
);
 
// store/reducers/user.reducer.ts
import { createReducer, on } from '@ngrx/store';
 
export const userReducer = createReducer(
  initialState,
  on(loadUsersSuccess, (state, { users }) => ({ ...state, users }))
);

// context/UserContext.tsx
import { createContext, useContext, useReducer } from 'react';
 
const UserContext = createContext();
 
export const UserProvider = ({ children }) => {
  const [state, dispatch] = useReducer(userReducer, initialState);
  
  return (
    <UserContext.Provider value={{ state, dispatch }}>
      {children}
    </UserContext.Provider>
  );
};
 
export const useUser = () => useContext(UserContext);

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { 
    path: 'home', 
    loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
  },
  { 
    path: 'profile', 
    loadChildren: () => import('./pages/profile/profile.module').then(m => m.ProfilePageModule)
  },
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// App.tsx
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Route, Redirect } from 'react-router';
 
const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route exact path="/home" component={Home} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

// home.page.spec.ts
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
 
describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;
 
  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [HomePage],
      imports: [IonicModule.forRoot()]
    }).compileComponents();
 
    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));
 
  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

// e2e/src/app.e2e-spec.ts
import { AppPage } from './app.po';
 
describe('App', () => {
  let page: AppPage;
 
  beforeEach(() => {
    page = new AppPage();
  });
 
  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toContain('Welcome');
  });
});

// 页面懒加载
{
  path: 'profile',
  loadChildren: () => import('./pages/profile/profile.module')
    .then(m => m.ProfilePageModule)
}

<ion-content>
  <ion-virtual-scroll [items]="items" approxItemHeight="50px">
    <ion-item *virtualItem="let item">
      {{ item.name }}
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

// 预加载关键资源
<link rel="preload" href="assets/data.json" as="fetch">

<ion-img src="assets/image.jpg" alt="描述"></ion-img>

# 构建
ionic build
 
# 部署到服务器
# 将 www/ 或 dist/ 目录部署到 Web 服务器

# Android
# 在 Android Studio 中构建 APK 或 AAB
# 上传到 Google Play Store
 
# iOS
# 在 Xcode 中构建 IPA
# 上传到 App Store

# 安装 Appflow SDK
# 配置 appflow.config.json
# 推送代码到 Git
# 在 Appflow 仪表板中触发构建和部署

// capacitor.config.ts
import { CapacitorConfig } from '@capacitor/cli';
 
const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  server: {
    androidScheme: 'https',  // 使用 HTTPS
    cleartext: false          // 禁止明文流量
  }
};

// 好的做法
const UserProfile = ({ user }) => (
  <IonCard>
    <IonCardHeader>
      <IonAvatar>
        <img src={user.avatar} alt={user.name} />
      </IonAvatar>
      <IonCardTitle>{user.name}</IonCardTitle>
    </IonCardHeader>
    <IonCardContent>
      <p>{user.email}</p>
    </IonCardContent>
  </IonCard>
);
 
// 避免过度封装

// 本地状态：组件内部
const [count, setCount] = useState(0);
 
// 共享状态：Context 或状态管理库
const UserContext = createContext();
 
// 服务端状态：React Query / SWR
const { data, error } = useSWR('/api/user', fetcher);

<ion-virtual-scroll [items]="items" approxItemHeight="50px">
  <ion-item *virtualItem="let item">
    <ion-label>{{ item.name }}</ion-label>
  </ion-item>
</ion-virtual-scroll>

<ion-img src="image.jpg" alt="描述"></ion-img>

{
  path: 'profile',
  loadChildren: () => import('./pages/profile/profile.module')
    .then(m => m.ProfilePageModule)
}

RouterModule.forRoot(routes, { 
  preloadingStrategy: PreloadAllModules 
})

// Angular
this.form = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
  email: ['', [Validators.required, Validators.email]],
});
 
// React
import { useForm } from 'react-hook-form';
const { register, handleSubmit } = useForm();

:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #0cd1e8;
}
 
.ion-color-custom {
  --ion-color-base: var(--ion-color-custom);
}

// Angular
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.error('全局错误:', error);
    // 发送错误到监控服务
  }
}
 
// React
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    console.error('捕获错误:', error, errorInfo);
  }
}

// 测试业务逻辑
describe('UserService', () => {
  it('should format user name', () => {
    const user = { firstName: 'John', lastName: 'Doe' };
    expect(formatName(user)).toBe('John Doe');
  });
});

// 测试关键用户流程
describe('Login Flow', () => {
  it('should login successfully', () => {
    cy.visit('/login');
    cy.get('[data-testid=email]').type('[email protected]');
    cy.get('[data-testid=password]').type('password');
    cy.get('[data-testid=submit]').click();
    cy.url().should('include', '/home');
  });
});

const LazyComponent = lazy(() => import('./HeavyComponent'));
 
function App() {
  return (
    <Suspense fallback={<IonSpinner />}>
      <LazyComponent />
    </Suspense>
  );
}

// ngsw-config.json
{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/index.html", "/*.css", "/*.js"]
      }
    }
  ]
}