製作手機app基本配置

要建立Ionic專案，您需要安裝最新版本的CLI和Cordova。

npm install -g ionic cordova
完成之後，建立第一個Ionic應用程式：
ionic start MyIonicProject tabs|sidemenu|blank|super|tutorial
start 會告訴CLI建立一個新的應用程式。
MyIonicProject 將是您的專案中的目錄名稱和應用程式名稱。
  tabs ：一個簡單的3選項卡布局
  sidemenu：側面有一個可滑動選單的佈局
  blank：一個簡單的初始頁面
  super：超過14個準備使用頁面設計的入門專案
  tutorial：引導式啟動專案

在瀏覽器中檢視應用程式:
cd MyIonicProject/----cd進入建立的資料夾
ionic serve----在瀏覽器中測試應用程式


專案結構：
node_modules----node各類依賴包
resources----android/ios 資源（更換圖示和啟動動畫）
src----開發工作目錄，頁面、樣式、指令碼和圖片都放在這個目錄下
  app----應用根目錄
  assets----資源目錄（靜態檔案（圖片，js框架。。。）
  pages----頁面檔案，放置編寫的頁面檔案，包括：html，scss，ts
  theme----主題檔案，裡面有一個scss檔案，設定主題資訊。
  index.html----入口檔案
  manifest.json
  service-worker.js
www----靜態檔案
config.xml----配置檔案
ionic.config.json
ionic.starter.json
package.json----node安裝模組時的依據
package-lock.json
tsconfig.json----TypeScript專案的根目錄，指定用來編譯這個專案的根檔案和編譯選項
tslint.json----格式化和校驗typescript


新增iOS專案：
 ionic cordova platform add ios
把src裡的內容同步到ios專案中(src後面會講到)
 ionic cordova build ios
執行iOS專案,相當於在Xcode裡面按Command+R
 ionic cordova emulate ios
新增android專案
 ionic cordova platform add android
 ionic cordova build android
 ionic cordova emulate android


修改 Tabs，讓目錄結構清晰----
1. 修改src/pages/tabs/tabs.html

<ion-tabs>
  <ion-tab *ngFor="let tabRoot of tabRoots" 
 
[root]="tabRoot.root" tabTitle="{{tabRoot.tabTitle}}" tabIcon="{{tabRoot.tabIcon}}"></ion-tab>
</ion-tabs>

2. 開啟 Tabs.ts，修改為如下程式碼：
-------內容-----

import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from 
 
'../home/home';
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tabRoots: Object[];
constructor() {
    this.tabRoots = [
      {
        root: HomePage,
tabTitle: 'Home',
tabIcon: 'home'
},
{
        root: ContactPage,
tabTitle: 'Contact',
tabIcon: 'notifications'
},
{
        root
 
: AboutPage,
tabTitle: 'About',
tabIcon: 'document'
}
    ];
}
}

------------