Ionic簡介
ionic是基於typeScript語言，使用angular框架的組件庫，提供了一系列的移動端的組件列表。
以下提供的window系統的環境安裝，如果是ios系統，每個命令需前面加上sudo ，並可能命名的參數有些差異。
Ionic運行環境-按順序安裝
安裝Git
下載鏈接：
https://git-scm.com/ ，選擇下載版本2或以上版本。
安裝步驟：
點擊默認安裝
檢驗成功：
在命令行輸入，git --version 。
安裝Nodejs
###下載鏈接：
https://nodejs.org/ ,選擇穩定版，建議不按照最新版。
安裝步驟：
點擊默認安裝。
檢驗成功：
在命令行輸入，node -v 。
安裝Ionic
官網鏈接：
https://ionicframework.com/,這個不需要下載。
安裝步驟：
- 打開命令行，最好以管理員的身份運行。
- 輸入安裝cordova命令：npm install -g cordova ，安裝cordova。（建議分開安裝）
- 輸入安裝ionic命令：npm install -g ionic ，安裝ionic。（建議分開安裝）
檢驗成功:
在命令行輸入，ionic -v
Faq收集：
- 因為網站在國外，可能會出現網絡不穩定，安裝會出錯。
- 解決方案： 使用淘寶的鏡像安裝，命令行輸入。
- npm install -g cnpm –registry=https://registry.npm.taobao.org（npm鏡像源指向淘寶）
- cnpm install -g cordova ionic（安裝cordova ionic）
安裝VsCode
官網鏈接：
https://code.visualstudio.com/，建議下載最新版。
安裝步驟：
點擊默認安裝。
Ionic 簡單例子創建
創建ionic項目
- 命令行輸入 ionic start app tabs
目錄的說明
node_modules ----node各類依賴包
resources ----android/ios 資源（更換圖標和啟動動畫）
src ----開發工作目錄，頁面、樣式、腳本和圖片都放在這個目錄下
- src下的 app ----應用根目錄
- src下的 assets ----資源目錄（靜態文件（圖片，js框架。。。）
- src下的 pages ----頁面文件，放置編寫的頁面文件，包括：html，scss，ts
- src下的 theme ----主題文件，裡面有一個scss文件，設置主題信息。
- src下的 index.html ----入口文件
- src下的 manifest.json
- src下的 service-worker.js
- www ----靜態文件
- config.xml ----配置文件
- ionic.config.json
- ionic.starter.json
- package.json ----node安裝模塊時的依據
- package-lock.json
- tsconfig.json ----TypeScript項目的根目錄，指定用來編譯這個項目的根文件和編譯選項
- tslint.json ----格式化和校驗typescript
項目的運行
- 在vscode的窗口模式下輸入命令行 ionic serve
- 頁面的展現
分享到:
