安裝Ionic CLI and Cordova
npm install -g ionic cordova
建立ionic項目
ionic start itemName
這時會提示選擇官方模闆
- tabs: 一個簡單的 3 個tab布局
- sidemenu: 一個具有側邊欄的布局
- blank: 一個隻有一個頁面的空白布局
- super: 一個具有超過 14 個可以使用的頁面設計
- tutorial: 入門引導項目
項目類型
啟動項目
ionic serve –o
項目結構介紹
itemName
│
├─node_modules //項目依賴檔案
│
├─resources //項目圖示
│ │ icon.png //安裝應用後桌面圖示
│ │ splash.png //打開APP後的閃屏圖檔
│ │
│ ├─android
│ │ ├─icon
│ │ └─splash
│ │
│ └─ios
│ ├─icon
│ └─splash
│
├─src //項目路徑，在此編輯自己的項目
│ │
│ ├─app
│ │ ├─app.component.ts //初始化項目，定義rootPage
│ │ ├─app.module.ts //項目中所有的module都要在次聲明
│ │ ├─app.html //項目視圖
│ │ ├─app.scss //全局樣式表
│ │ └─main.ts //項目引導檔案
│ │
│ ├─assets //資源檔案，可将圖檔資源放于此處
│ │
│ ├─pages //項目頁面（blank隻有home，其他模闆可能有别檔案夾）
│ │ ├─home
│ │ │ home.html //.html
│ │ │ home.scss //.scss 樣式代碼
│ │ │ home.ts //.ts 邏輯代碼
│ │
│ └─theme //項目主題，比如可以定義所有頁面的背景色$background-color
│ │ variables.scss
│ │
│ │ index.html //項目入口
│ │ manifest.json
│ │ service-worker.js
│
└─www //編譯後的項目會儲存在這裡
│ config.xml //項目配置檔案，包名、名稱、minSdkVersion等都在此處配置
│ ionic.config.json
│ package.json //項目依賴檔案清單
│ tsconfig.json
└─tslint.json
Ionic項目指令
ionic serve 啟動
ionic g component name 建立元件
directive name 建立指令
page name 建立頁面
pipe name 建立管道
provider name 建立服務