ionic3 入門【1】建立Ionic項目及基本配置_Ionic

製作手機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'      }    ];  }}

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