欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

VS2017 Cordova Ionic2 移动开发环境搭建教程

程序员文章站 2023-11-05 11:35:10
分享vs2017 cordova ionic2 移动开发环境搭建教程 1. 文档概述 本文档用于说明visual studio 2017下使用 ionic 2进行跨平台...

分享vs2017 cordova ionic2 移动开发环境搭建教程

1. 文档概述

本文档用于说明visual studio 2017下使用 ionic 2进行跨平台开发的运行环境配置。

2. 安装环境

windows10

3. 安装visual studio 2017community

3.1 官方下载地址:

3.2 运行安装程序,需选中使用javascript的移动开发,如下图所示。

VS2017 Cordova Ionic2 移动开发环境搭建教程

3.3 进行vs2017扩展ionic2安装

3.3.1运行vs2017,点击菜单栏的 工具->扩展和更新

VS2017 Cordova Ionic2 移动开发环境搭建教程

3.3.2 安装 npm task runner

在扩展和更新窗口左侧点 联机 右侧搜索 npm task runner,找到后点下载

VS2017 Cordova Ionic2 移动开发环境搭建教程

3.3.3 安装 ionic2

同3.3.2一样搜索 ionic2 找到 ionic 2 templates for visual studio 2017 ,然后点击下载

3.3.4 关闭visual studio 2017,此时开始安装上面所下载的两个扩展。

或者不使用上述方法,在安装好 node.js之后,在命令行执行:npm install -g cordova ionic

3.4 建立一个ionic2项目

VS2017 Cordova Ionic2 移动开发环境搭建教程

点确定后可看到右侧解决方案资源管理器依赖项正在还原。

如果还原失败,请使用vpn等代理工具fq。

VS2017 Cordova Ionic2 移动开发环境搭建教程

3.5 运行

如果一切顺利,依赖项还原全部成功,这时候就可以开始执行了。

运行需要一会儿时间,稍后在浏览器看到如下界面,说明完全成功了。

VS2017 Cordova Ionic2 移动开发环境搭建教程

3.6 但是,有这么顺利吗?!

我在依赖性还原这里,即使开着代理,vpn,仍然出现错误@ionic/app-scripts 未安装

VS2017 Cordova Ionic2 移动开发环境搭建教程

3.6.1 解决办法

进入windows的命令提示符。

输入:npm install @ionic/app-scripts@latest --save-dev

如果顺利执行的话,再次进入vs2017就会发现@ionic/app-scripts已经更新好了。

3.6.2 然而,执行上面命令的时候出现了

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

怎么解决呢:

1.在浏览器手工下载上面提示的链接,保存文件到某个目录

2.然后进入windows命令提示符: set sass_binary_path=e:/tools/win32-x64-51_binding.node

3.再次运行 npm install @ionic/app-scripts@latest --save-dev

ok,成功。

3.6.1 如果上面命令都不能执行,可能你需要下载更新node.js

官网下载:

安装完成之后,在windows的开始菜单会有 node.js command prompt快捷方式。

点击此快捷方式,在此窗口执行上述npm命令

VS2017 Cordova Ionic2 移动开发环境搭建教程

更多精彩内容大家可以点击《visual studio 2017开发使用教程》,关于visual studio的安装教程可以点击《visual studio安装使用手册》进行学习,希望大家喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。