Ionic3學習筆記（一）安裝、項目結構與常用命令

本文爲原創文章，轉載請標明出處

目錄

1. 安裝
2. 項目結構
3. 常用命令

1. 安裝

安裝Cordova、Ionic

npm install -g cordova ionic

創建一個新項目，有blank、tabs、sidemenu3種樣式可選，tutorial、super、conference爲官方Demo，aws爲AWS Mobile Hub Demo

ionic start myApp blank
ionic start myApp tabs
ionic start myApp sidemenu
ionic start myApp tutorial
ionic start myApp super
ionic start myApp conference
ionic start myApp aws

瀏覽器運行調試

cd myApp
ionic serve

2. 項目結構

./hooks => 包含App生命週期中自動執行的操作
./node_modules & ./package.json => npm依賴項
./platforms => 添加的平臺
./plugins => 安裝的插件
./resourses => App圖標和啓動畫面
./src/ => 主要工作目錄
./src/index.html => App主要入口，用來設置腳本和CSS
./src/app/app.module.ts => App入口
./src/pages => 放置生成的頁面
./src/assets => 放置多媒體文件
./src/theme/variables.scss => 用於覆蓋默認樣式
./www => 瀏覽器運行調試時自動生成
config.xml => 配置文件
ionic.config.json => 上傳到 ionic.io 會被使用
.tsconfig.json & tslint.json => TS相關

3. 常用命令

打印出Ionic運行環境信息

ionic info

更新Ionic到最新版本

npm install -g ionic@latest

生成新的page、provider等

ionic generate [<type>] [<name>]

[<type>]: e.g. component, directive, page, pipe, provider, tabs

在瀏覽器中運行調試，可打開iOS、Android、Windows3個界面

ionic serve --lab

生成一個平臺圖標、啓動畫面

ionic cordova resources ios
ionic cordova resources --icon ios
ionic cordova resources --splash ios

列出所有平臺

ionic cordova platform ls

添加、刪除、更新一個平臺

ionic cordova platform add ios
ionic cordova platform remove ios
ionic cordova platform update ios

編譯一個平臺並壓縮

ionic cordova build ios --prod

添加、刪除插件

ionic plugin add cordova-plugin-camera
ionic plugin rm cordova-plugin-camera

如有不當之處，請予指正，謝謝～