ionic3 入门【1】创建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'
      }
    ];
  }
}

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