Windows環境下搭建Ionic+cordova環境開發混合移動APP
網上有多篇ionic開發環境搭建的文章,但是針對windows下的說明比較少,所以在這裡再補充一篇windows下的開發環境搭建文章
1.nodejs
nodejs官網:
它會自動檢測當前OS型別,並提供下載地址
Windows
image.png
下載完成後,雙擊開啟進入安裝介面,選擇安裝地址,一路下一步即可
image.png
image.png
image.png
image.png
image.png
image.png
2.java jdk 1.8
jdk安裝比較簡單,也不需要什麼太多技巧,將jdk安裝包下載下來,直接雙擊進行安裝即可
1.JDK下載地址：
http://www.oracle.com/technetwork/java/javase/downloads/index.html
點開連結你應該看到如下圖所示的介面：
image.png
2.點選上圖中箭頭所指的地方，會出現下面的這個介面，此時你需要根據你的電腦系統來進行對應的版本進行選擇，在選擇版本和下載之前你需要首先接收協議，具體介面如下圖所示：
image.png
3.雙擊以後進行JDK的安裝（記得按照第二幅圖修改一下安裝路徑，不要什麼東西都安裝到系統盤。。。）：
（1）雙擊進行安裝介面如下所示：
image.png
image.png
image.png
image.png
image.png
4.安裝完成後，需要進行環境變數的配置，右鍵我的電腦—屬性—-高階系統設定就會看到下面的介面：
image.png
5.點選上圖中的環境變數，然後開始環境變數的配置：
（1）點選系統變數下面的新建按鈕，變數名JAVA_HOME（代表你的JDK安裝路徑），值對應的是你的JDK的安裝路徑。
image.png
（2）繼續在系統變數裡面新建一個CLASSPATH變數，其變數值如下圖所示：
image.png
此處需要注意：最前面有一個英文狀態下的小圓點。。。。很多初學者在配置環境變數的時候就會跌倒在這個坑裡。
（3）在你的系統變數裡面找一個變數名是PATH的變數，需要在它的值域裡面追加一段如下的程式碼：
%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
此時你應該在你原有的值域後面追加，記得在原有的值域後面記得新增一個英文狀態下的分號。
最後點選確定，此時JDK的環境變數配置就完成了。
6.測試自己所配置的環境變數是否正確
（1）WINDOWS+R鍵，輸入cmd，進入命令列介面，如下所示：
image.png
（2）輸入java -version命令，可以出現如下圖的提示，你可以看你安裝的JDK版本。
image.png
（3）輸入javac命令可以出現如下的提示：
image.png
（4）輸入java命令就會出現如下圖所示的結果
image.png
3.Android SDK
3.Android SDK
比較推薦的安裝方式是使用AndroidStudio 來安裝安卓環境,雖然在日常開發中,我們絕大部分是不會使用到該工具,但是在某一些情況下,還是可能會遇到需要使用它來檢視一些報錯資訊的.
由於網路原因,我們可以再國內的網站去下載AndroidStudio
地址: http://www.android-studio.org
進入頁面後,根據自己不同的平臺,選擇對應的版本
image.png
下載完成後,雙擊安裝包進入安裝介面
image.png
image.png
image.png
image.png
image.png
image.png
安裝完成後,第一次執行,會進入如下介面
點選Next
image.png
選擇Standard,點選Next
image.png
進入該介面選擇sdk位置,如果已經有sdk的資料夾,可以直接選擇該資料夾,減少不必要的檔案下載,選擇好後,點選Next;
sdk安裝不推薦存在有空格的目錄!
image.png
點選Finish,進入下載介面
image.png
這裡會下載sdk相關的檔案,下載完成後,點選finish
image.png
下載完成後,點選Finish
image.png
如果不想安裝AndroidStudio ,也可以直接拷貝其他人的sdk檔案到你的電腦上,配置環境變數後,一樣適用!
設定ANDROID_HOME
1.右鍵點選"我的電腦",選擇"屬性",點選"高階系統設定",開啟視窗後,點選"環境變數",設定環境變數資訊
image.png
2.在"系統變數"中,新建ANDROID_HOME,輸入sdk地址
image.png
3.點選"path",新建兩條記錄路,將sdk路徑下的 tools和platform-tools配置進去,點選確定完成設定
image.png
重新開啟一個cmd視窗,在cmd視窗中輸入:adb ,有資訊輸出,表示安裝成功
image.png
**4.cordova **
cordova安裝命令:
npm install -g cordova
該命令安裝的是預設最新版本,目前我們使用的是6.5.0,安裝該版本命令是:
npm install -g [email protected]
如果使用其他版本,則同樣道理,在@後直接增加版本號即可
由於國內一些網路原因,所以需要做一些針對網路的處理
方法1.翻牆,通過軟體翻牆後再進行安裝
方法2.淘寶映象,國內有淘寶映象可以使用,這種方式安裝起來會比較快,比較推薦該方式
設定方式:
npm config set registry https://registry.npm.taobao.org
配置後檢視是否設定成功:
執行:
npm config get registry
如果想要還原回原來的映象路徑:
則執行:
npm config set registry https://registry.npmjs.org/
image.png
由於通常失敗都是網路或許可權不足導致的,所以windows下可以嘗試使用管理員模式開啟cmd視窗,Mac環境下,可以加sudo以管理員模式,執行install命令後會進入安裝介面:
image.png
ionic的安裝和前面在mac下安裝方式類似,都是隻需要使用命令列進行安裝即可,前文地址:https://www.jianshu.com/p/3c0c14cfb578
安裝過程中,沒有報任何錯誤,則表示已經安裝成功
image.png
在cmd視窗下直接輸入:cordova -v 檢視版本資訊,顯示資訊則表示安裝成功
image.png
5.Webstorm/Sublime/VSCode
通常我們開發的工具是Webstorm,不過該工具可能會佔用較大記憶體,所以如果覺得會有卡頓問題,也可以使用Sublime或VSCode做開發,具體安裝步驟就不做演示,自己獨立安裝完成即可
**6.Chrome **
由於我們日常的開發都是在瀏覽器上進行的,所以我們使用的是Chrome瀏覽器
因為需要請求後臺資料,所以需要做跨域處理
設定也比較簡單:
1.找到Chrome 瀏覽器桌面快捷方式->右鍵->屬性->快捷方式
2."目標路徑"後增加: --disable-web-security --user-data-dir,如果路徑上有雙引號,則需要加在雙引號後,點選確定完成設定
image.png
點選確定後,重新開啟Chrome瀏覽器,瀏覽器中出現這個黃色的提醒資訊,則表示跨域成功
image.png
至此,app開發前端環境搭建完成
jdk安裝部分由於比較簡單,樓主電腦也已經安裝過jdk了,就沒有再重新安裝一遍,jdk安裝來源部落格:http://blog.csdn.net/u012934325/article/details/73441617