Ionic 系列 - (2) 目錄結構分析

1. 目錄結構分析

2. crm\e2e

端對端測試

3. crm\src

開發工作目錄，頁面、樣式、腳本和圖片都放在這個目錄下

3.1. crm\src\app

開發的程式基本上都在這裡

3.2. crm\src\assets

靜態文件

3.3. crm\src\environments

配置運行環境

3.4. crm\src\theme

主題相關文件，可以針對這個文件再進行擴展

crm\src\theme\variables.scss

跟bootstrap一樣的概念去描述主題中的相關色系定義

// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/

/** Ionic CSS Variables **/
:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;
    ...

4. crm\src\index.html

入口文件

5. crm\karma.conf.js

測試文件設定，稍微查一下karma是一個單元測試的軟體，

6. crm\src\main.ts

主入口文件

7. crm\src\polyfills.ts

在ionic 加載之前執行

8. crm\src\test.ts

跟karma一樣用於測試使時用

9. 學習資源

Ionic4 Ionic5视频教程_Ionic4.x Ionic5.x入门实战教程