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

1. 文档概述

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

2. 安装环境

Windows10

3. 安装Visual Studio 2017community

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

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

3.3 进行VS2017扩展Ionic2安装

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

3.3.2 安装 NPM Task Runner

在扩展和更新窗口左侧点 联机 右侧搜索 NPM Task Runner，找到后点下载

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项目

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

如果还原失败，请使用VPN等代理工具FQ。

3.5 运行

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

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

3.6 但是，有这么顺利吗？！

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

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

官网下载：https://nodejs.org/en/

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

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

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

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

# VS2017  # Cordova  # Ionic2  # Visual  # Studio  # 2017  # community  # VS2017 安装打包插件的图文教程  # 解决VS2017不能打开stdio.h等文件的问题  # Windows安装配置C/C++（VS2017）OpenSSL开发环境配置教程  # VS2017做为Unity3D的脚本编辑器需要的最精简组件  # VS2017添加EF的MVC控制器报错的解决方法  # 在vs2017上配置AppGameKit库的图文教程  # 快捷方式  # 命令提示符  # 就会  # 文档  # 运行环境  # 会有  # 我在  # 好了  # 在此  # 下载地址  # 请使用  # 希望大家  # 点击下载  # 所示  # 开着  # 建立一个  # 解决办法  # 安装程序  # 命令行  # 会儿 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  如何在阿里云虚拟主机上快速搭建个人网站？  Laravel如何创建自定义中间件？（Middleware代码示例）  香港服务器网站卡顿？如何解决网络延迟与负载问题？  如何用好域名打造高点击率的自主建站？  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  免费网站制作appp,免费制作app哪个平台好？  Swift中循环语句中的转移语句 break 和 continue  bing浏览器学术搜索入口_bing学术文献检索地址  香港服务器WordPress建站指南：SEO优化与高效部署策略  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  Laravel如何处理表单验证？（Requests代码示例）  HTML5建模怎么导出为FBX格式_FBX格式兼容性及导出步骤【指南】  Java遍历集合的三种方式  Laravel如何使用查询构建器？（Query Builder高级用法）  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  利用vue写todolist单页应用  Laravel用户密码怎么加密_Laravel Hash门面使用教程  JavaScript实现Fly Bird小游戏  Python数据仓库与ETL构建实战_Airflow调度流程详解  三星、SK海力士获美批准：可向中国出口芯片制造设备  原生JS实现图片轮播切换效果  Laravel如何集成Inertia.js与Vue/React？（安装配置）  JavaScript常见的五种数组去重的方式  Laravel辅助函数有哪些_Laravel Helpers常用助手函数大全  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  如何在腾讯云服务器上快速搭建个人网站？  SQL查询语句优化的实用方法总结  公司网站制作价格怎么算,公司办个官网需要多少钱？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  Laravel如何实现多对多模型关联？（Eloquent教程）  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  如何快速查询域名建站关键信息？  实例解析angularjs的filter过滤器  Laravel如何配置.env文件管理环境变量_Laravel环境变量使用与安全管理  魔方云NAT建站如何实现端口转发？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  如何在不使用负向后查找的情况下匹配特定条件前的换行符  BootStrap整体框架之基础布局组件  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  如何用腾讯建站主机快速创建免费网站？  简历在线制作网站免费版,如何创建个人简历？  如何实现javascript表单验证_正则表达式有哪些实用技巧  详解jQuery中的事件  海南网站制作公司有哪些,海口网是哪家的？  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境