VS2017 Cordova Ionic2 移動(dòng)開(kāi)發(fā)環(huán)境搭建教程
分享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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
父頁(yè)面中：這是一個(gè)js他的意思就是模擬一個(gè)頁(yè)面生成。ReturnValue就是那一個(gè)頁(yè)面返回的值2008-12-12
ASP.NET MVC HtmlHelper如何擴(kuò)展
ASP.NET MVC 中HtmlHelper方法為我們提供很多html標(biāo)簽，只需在頁(yè)面調(diào)用就行了，但是微軟并沒(méi)有把所有的html標(biāo)簽都對(duì)應(yīng)有了擴(kuò)展方法，需要我們自定義HtmlHelper，來(lái)滿(mǎn)足我們需要。2016-05-05
這篇文章主要介紹了淺談VS中的DataPager分頁(yè)的相關(guān)資料和示例,需要的朋友可以參考下2015-02-02
ASP.NET 頁(yè)面刷新的實(shí)現(xiàn)方法(包括html,js)
ASP.NET 頁(yè)面刷新的實(shí)現(xiàn)方法，比較全了， 包括html與js下的實(shí)現(xiàn)方法。2010-03-03
如何在ASP.NET Core中使用Session的示例代碼
這篇文章主要介紹了如何在ASP.NET Core中使用Session的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
ASP.NET Core 2.0 本地文件操作問(wèn)題及解決方案
這篇文章主要介紹了ASP.NET Core 2.0 本地文件操作問(wèn)題及解決方案,需要的朋友可以參考下2017-10-10
ASP.NET使用GridView導(dǎo)出Excel實(shí)現(xiàn)方法
這篇文章主要介紹了ASP.NET使用GridView導(dǎo)出Excel實(shí)現(xiàn)方法,是asp.net操作office文件的一個(gè)典型應(yīng)用,代碼中備有較為詳盡的注釋便于讀者理解,需要的朋友可以參考下2014-11-11
ASP.NET.4.5.1+MVC5.0設(shè)置系統(tǒng)角色與權(quán)限(一)
這篇文章主要介紹了ASP.NET.4.5.1+MVC5.0設(shè)置系統(tǒng)角色與權(quán)限的部分內(nèi)容，后續(xù)我們將繼續(xù)討論這個(gè)話(huà)題，希望小伙伴們喜歡。2015-01-01
在asp.net中獲取當(dāng)前頁(yè)面的URL的方法(推薦)
下面小編就為大家?guī)?lái)一篇在asp.net中獲取當(dāng)前頁(yè)面的URL的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
Asp.net導(dǎo)出Excel/Csv文本格式數(shù)據(jù)的方法
這篇文章主要介紹了Asp.net導(dǎo)出Excel/Csv文本格式數(shù)據(jù)的方法,比較實(shí)用，需要的朋友可以參考下2014-09-09