【Ionic2序列】二、安裝環(huán)境

時間：2017-02-24 23:57:45
作者：zhongxia

不管學習什么，環(huán)境都是要先安裝起來，然后邊學習邊敲代碼，這樣才能學習掌握的深。

零、總結

本節(jié)沒有什么難點，照著來就行了。 安裝環(huán)境可能 Android SDK 安裝會 因為網(wǎng)絡環(huán)境出問題， 具體筆者沒有嘗試過，就不多啰嗦了，自行百度?；蛘叩群竺婀P者嘗試過后，寫教程。

1. 安裝 nodejs
2. 用 nvm 管理 node版本， 用nrm 管理 npm 鏡像源
3. 用 npm 安裝 ionic2 ， cordova
4. IOS環(huán)境，則看下Xcode是否為最新版本
5. Android環(huán)境，安裝JDK，Android SDK
6. 生成腳手架，跑簡單DEMO。

本教程以Mac系統(tǒng) + IOS 為主，Window系統(tǒng)，自行百度哈

一、安裝Node

# 1. 安裝Node
brew install node

# 2. 檢查是否安裝完成
node --version
npm --version

# 3. 用這個來管理Node的版本
npm install -g nvm 

# 4. nvm簡單使用方法
nvm ls   # 查看已安裝的Node版本

╰─?  nvm ls 
         v4.4.4
         v5.9.0
->       v6.3.0
         v7.1.0
         system
default -> 6.3.0 (-> v6.3.0)
node -> stable (-> v7.1.0) (default)
stable -> 7.1 (-> v7.1.0) (default)
iojs -> N/A (default)


nvm use v6.3.0 # 使用指定版本

nvm --help # 幫助，然后看使用

Example:
  nvm install v0.10.32                  Install a specific version number
  nvm use 0.10                          Use the latest available 0.10.x release
  nvm run 0.10.32 app.js                Run app.js using node v0.10.32
  nvm exec 0.10.32 node app.js          Run `node app.js` with the PATH pointing to node v0.10.32
  nvm alias default 0.10.32             Set default node version on a shell


# 5. 安裝nrm來管理npm的鏡像源
npm install -g nrm 

─?  nrm ls                                                  
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - http://registry.npm.taobao.org/
  edunpm - http://registry.enpmjs.org/
  eu ----- http://registry.npmjs.eu/
  au ----- http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj ----- https://registry.nodejitsu.com/
  pt ----- http://registry.npmjs.pt/

nrm test taobao # 測試淘寶鏡像源的速度

npm use taobao # 使用淘寶鏡像源

二、安裝 Ionic2, cordova

常規(guī)npm安裝，沒有啥特別的。

npm install -g ionic2 cordova

ionic2 -version

三、IOS 環(huán)境

貌似不需要安裝什么了，就如果自己的Xcode還是舊的，就給升級下。 還有要注意一個事。 Xcode 程序要放在 Application 根目錄下， 不要亂移動。【我有過這個錯誤】

四、Android環(huán)境

4.1 JDK

安裝個最新的，1.8x， 官網(wǎng)下載安裝包，然后一直下一步。 然后設置一個 path（環(huán)境變量）。

JAVA_HOME 環(huán)境變量

自行查找教程，這里不寫了?！具@個簡單，大家隨意】

4.2 Android SDK

下載一個Android Stuidio ，然后安裝， 在設置 ANDROID_HOME 的環(huán)境變量。

自行查找教程，這里不寫了?！具@個因為沒有具體安裝過，寫了也是忽悠人】

五、環(huán)境安裝好了，來測試下吧

# 初始化項目腳手架
ionic start MyIonic2Project tutorial --v2

# MyIonic2Project 自定義的項目名

# tutorial  腳手架項目名（不寫，默認 tab）

# --v2 代表創(chuàng)建 Ionic2的腳手架【必須要加，如果用Ionic2】


# 初始化好之后，運行跑起來吧, 會自動打開瀏覽器
ionic serve 

# 運行端口是 8100 ，如果被占用則

# 看8100端口被誰占用【window下應該沒有該命令，因此自行找辦法】
lsof -i tcp:8100

# 殺掉殺掉進程
kill [pid] 

好啦，本節(jié)結束了。 下面開始學習目錄結構以及怎么寫代碼吧。