原文: Apache Cordova開發環境搭建(一)-Visual Studio
一、使用Visual Studio開發Apache Cordova手機App
1.版本要求，Visual Studio需求2015或2017
2.在安裝的之後勾選 JavaScript應用之Apache Cordova 以及所依賴的工具就可以了。
3.
Visual Studio 2015 的安裝程式包括支援 Cordova 應用開發的第三方開源軟體：
- Joyent Node.js 讓 Visual Studio 能與 Apache Cordova 指令行界面 (CLI) 和 Apache Ripple 仿真器內建
- 為特定的 Cordova 插件手動添加 Git URI 時需要使用的 Git CLI。
- 使用 Google Chrome在 iOS 和 Android 上運作 Apache Ripple 仿真器
- Android 生成過程需要用到的 Apache Ant 1.8.0 或更高版本。
- Android 生成過程需要用到 32 位的 Oracle Java JDK 7。注意： 不支援 64 位的 Java。建議使用Java8
- Android 生成過程和 Ripple 需要用到的 Android SDK。
- Apple iTunes将應用部署到iOS 裝置。
二、VisualStudio2015或更高版本安裝成功之後，需要進行環境變量配置
很多時候為了VS的安裝速度，對JDK、AndroidSDK等在安裝VS的時候不會選中。可以使用以前安裝過的。
這樣的情況下必須進行環境變量配置。
1.為了更好減少錯誤，建議直接修改系統的環境變量
jdk環境變量配置 Apache Ant 簡介和配置 AndroidSdk下載下傳位址和環境變量配置2.當然可以在、VS的配置中單獨修改，可使用Visual Studio檢測和維護下列環境變量中的安裝路徑：
- ADT_HOME 指向 Android 安裝路徑。
- ANT_HOME 指向你計算機上的 Ant 檔案夾。
- GIT_HOME 指向 Git 安裝路徑。
- JAVA_HOME 指向 Java 安裝路徑。
Visual Studio 在建立并運作你的應用時會使用這些環境變量。 你可以通過 Visual Studio"選項"對話框來檢視環境變量并修改它們的值。
- 在 Visual Studio 菜單欄上依次選擇"工具"和"選項"。
- 在選項對話框中，選擇 适用于 Apache Cordova 的工具，然後選擇Environment Variable Overrides。
- 請選中要修改項的複選框，然後修改該值。
三、使用VS建立Corodva項目
1.建立項目
2.建立結果如下，config.xml 配置器，可以配置各個平台的資訊，以及安裝管理Cordova插件。
3.目錄結構說明
- merges 存放各個平台的特殊的代碼，與www目錄合并編譯，相同的檔案merges下的代碼檔案優先。
- plugins 即插件目錄，cordova 通路本地裝置屬性的原生API也是以插件的形式提供。
- res 适用于各個平台的特殊資源（圖示和啟動畫面）。
- www 包含應用程式代碼。
- css 包含預設空白模闆的基本CSS樣式。
- images 建議應用的圖檔儲存于此。
- scripts 是JavaScript 和 TypeScript 檔案預設的儲存目錄。
- config.xml 包含工程的配置檔案
- taco.json 存儲使 Visual Studio 打造非 Windows 作業系統像 mac 上的項目中繼資料
- www\index.html 是應用預設的首頁面。
- Project_Readme.html 包含有用的資訊連結。
4.如果生成成功對應平台下的安裝包就可以直接使用了。
四、在剛開始使用Cordova項目時經常遇到的問題整理如下：
- vs2015 生成 apache cordova項目無響應
- vs2015 生成 cordova 頁面中文亂碼
- VS android應用啟動調試Could not locate the Android Debug Bridge (adb.exe)
- Cordova頁面加載外網圖檔失敗，Refused to load the image
- Cordova 配置WebView可以打開外部連結
更多：
Apache Cordova開發環境搭建（二）VS Code Cordova事件整理 cordova-plugin-vibration 裝置震動整理更多參考文章：
1.
https://segmentfault.com/a/11900000025367992.
https://blogs.msdn.microsoft.com/visualstudio_cn/2015/03/24/apache-cordovamacvisual-studio/ https://blogs.msdn.microsoft.com/visualstudio_cn/2015/03/24/apache-cordovamacvisual-studio/