分享VS2017 Cordova Ionic2 移動(dòng)開(kāi)發(fā)環(huán)境搭建教程

1. 文檔概述

本文檔用于說(shuō)明Visual Studio 2017下使用 Ionic 2進(jìn)行跨平臺(tái)開(kāi)發(fā)的運(yùn)行環(huán)境配置。

2. 安裝環(huán)境

Windows10

3. 安裝Visual Studio 2017community

3.1 官方下載地址：https://www.visualstudio.com/downloads/

3.2 運(yùn)行安裝程序，需選中使用JavaScript的移動(dòng)開(kāi)發(fā)，如下圖所示。

3.3 進(jìn)行VS2017擴(kuò)展Ionic2安裝

3.3.1運(yùn)行VS2017，點(diǎn)擊菜單欄的 工具->擴(kuò)展和更新

3.3.2 安裝 NPM Task Runner

在擴(kuò)展和更新窗口左側(cè)點(diǎn) 聯(lián)機(jī) 右側(cè)搜索 NPM Task Runner，找到后點(diǎn)下載

3.3.3 安裝 Ionic2

同3.3.2一樣搜索 Ionic2 找到 Ionic 2 Templates for Visual Studio 2017 ，然后點(diǎn)擊下載

3.3.4 關(guān)閉Visual Studio 2017,此時(shí)開(kāi)始安裝上面所下載的兩個(gè)擴(kuò)展。

或者不使用上述方法，在安裝好 node.js之后，在命令行執(zhí)行：npm install -g cordova ionic

3.4 建立一個(gè)Ionic2項(xiàng)目

點(diǎn)確定后可看到右側(cè)解決方案資源管理器依賴(lài)項(xiàng)正在還原。

如果還原失敗，請(qǐng)使用VPN等代理工具FQ。

3.5 運(yùn)行

如果一切順利，依賴(lài)項(xiàng)還原全部成功，這時(shí)候就可以開(kāi)始執(zhí)行了。

運(yùn)行需要一會(huì)兒時(shí)間，稍后在瀏覽器看到如下界面，說(shuō)明完全成功了。

3.6 但是，有這么順利嗎？！

我在依賴(lài)性還原這里，即使開(kāi)著代理，vpn，仍然出現(xiàn)錯(cuò)誤@ionic/app-scripts 未安裝

3.6.1 解決辦法

進(jìn)入windows的命令提示符。

輸入：npm install @ionic/app-scripts@latest --save-dev

如果順利執(zhí)行的話(huà)，再次進(jìn)入VS2017就會(huì)發(fā)現(xiàn)@ionic/app-scripts已經(jīng)更新好了。

3.6.2 然而，執(zhí)行上面命令的時(shí)候出現(xiàn)了

Cannot download "https://github.com/sass/node-sass/releases/download/v4.5.0/win32-x64-51_binding.node":

怎么解決呢：

1.在瀏覽器手工下載上面提示的鏈接，保存文件到某個(gè)目錄

2.然后進(jìn)入windows命令提示符： set SASS_BINARY_PATH=E:/Tools/win32-x64-51_binding.node

3.再次運(yùn)行 npm install @ionic/app-scripts@latest --save-dev

OK，成功。

3.6.1 如果上面命令都不能執(zhí)行，可能你需要下載更新Node.js

官網(wǎng)下載：https://nodejs.org/en/

安裝完成之后，在windows的開(kāi)始菜單會(huì)有 Node.js command prompt快捷方式。

點(diǎn)擊此快捷方式，在此窗口執(zhí)行上述npm命令

更多精彩內(nèi)容大家可以點(diǎn)擊《Visual Studio 2017開(kāi)發(fā)使用教程》，關(guān)于visual studio的安裝教程可以點(diǎn)擊《Visual Studio安裝使用手冊(cè)》進(jìn)行學(xué)習(xí)，希望大家喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。