ionic项目开发环境配置

使用ionic+cordova WebApp项目环境搭建与项目创建 执行创建语句的前提是ionic环境已经装好,开始执行ionic start myApp blank。提示已经有同名项目,是否覆盖。这里创建的是一个blank(空) 的ionic项目。还要两种是tabs和sideMenu。 到这步项目就建好了,但是一般网络不好的情况下会报错。(因为无法重现错误,所以只能文字描述。如果还要问题可以在下面回复或者加下下面的qq)报错的原因就是npm packages安装 阅读详情

参考文章

Cordova 3.x 基础(1) – 环境搭建(Windows / Android)
http://rensanning.iteye.com/blog/2016364
phoneGap之Android环境搭建
http://haomou.net/2014/08/06/2014_phonegap_android/
ionic框架配置
http://haomou.net/2014/08/07/2014_ionic/
ant的配置
http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html

其实大体主要分两步:安装cordova和安装ionic

一,安装cordova

0,jdk

http://www.oracle.com/technetwork/java/javase/downloads/index.html
jdk1.7 http://pan.baidu.com/s/1o87IzfO
jdk1.8 http://pan.baidu.com/s/1dFb6Irf
环境变量配置
path:C:\Program Files\Java\jdk1.7.0_79\bin

1,首先安装Ant(cordova工具生成android项目时,需要的编辑工具)

(1),安装ant

http://pan.baidu.com/s/1jIvFwgQ
http://download.youkuaiyun.com/detail/superjunjin/9909046
到官方主页http://ant.apache.org下载新版的ant,得到的是一个apache-ant-1.9.5-bin.zip的压缩包。将其解压到你的硬盘上,例如:C:\Program Files\apache-ant-1.9.5。

(2),配置环境变量

path C:\Program Files\apache-ant-1.9.5\bin

classpath C:\Program Files\apache-ant-1.9.5\lib

(3),验证ant

为了验证ant是否成功安装,可以进行如下操作:

依次选择:开始->运行->cmd,输入如下命令:ant

如果出现如下内容,说明安装成功:

Buildfile: build.xml does not exist!

Build failed

这里写图片描述

【说明ant安装成功!因为ant默认运行build.xml文件,这个文件需要我们建立。】

2,安装android sdk

最好只装到sdk22,和cordova5.0配对,cordova5.0打包时会要求匹配sdk22,不然会报错,不能打包

android 离线包下载地址 有最新的sdk22和sdk23
http://mirrors.neusoft.edu.cn/android/repository/

别忘了配环境变量(把%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-
tools加到Path环境变量中,不然会报”Error: An error occurred while listing Android targets”错)

3,安装Node.js (这里主要是要用它的npm命令装东西)

https://nodejs.org/en/

node4:稳定,但不支持ECMAScript 6 http://pan.baidu.com/s/1qYPVqfa
node6:稳定,支持ECMAScript 6 http://pan.baidu.com/s/1bo7ODkF
node8:不稳定,支持ECMAScript 6,调试方法不成功(新的调试方法打不开调试界面)http://pan.baidu.com/s/1dF3WXsX
(https://nodejs.org/api/debugger.html
http://www.cnblogs.com/knightreturn/p/6480637.html)

4,安装phonegap和cordova(终于到主角了)

安装npm install -g phonegap 或 npm install -g cordova
卸载npm uninstall cordova -g 或 npm uninstall phonegap -g

推荐安装5.0版本,npm install -g cordova@5.0.0

安装完毕后可以创建一个cordova项目运行了
cordova create myapp com.org.myapp “HelloWorld”
cd myapp
cordova platform add android //添加android运行平台
cordova build android //编译apk
cordova run android //运行到真机

二,安装ionic

(其实就一句话,不知是屏蔽还是网速原因,我就一直装不上,一个礼拜左右每天都会装就是装不上,所以有了以下的办法)

1,npm install -g ionic

npm install -g ionic@1.6.4(或者安装固定版本)
(这句能成功安装就不用看下边的方法了)

2,推荐方法:

现在是可以装完了,但是提示没有ionic命令,乖乖用淘宝镜像吧,好使!

首先,装淘宝命令依赖包

$ npm install -g cnpm –registry=https://registry.npm.taobao.org

然后,用cnpm命令装ionic

cnpm install -g ionic

3,参考方法:

1,配置环境变量node的npm命令
Path : C:\Documents and Settings\Administrator\Application Data\npm
2,补齐npm文件夹下有关于ionic的文件
http://download.youkuaiyun.com/detail/superjunjin/8417723
3,补齐ionic项目下node_modules等文件
http://download.youkuaiyun.com/detail/superjunjin/8417731

三,常用ionic命令

ionic start myApp sidemenu //创建带有左侧带有menu栏的示例项目
ionic start myApp blank //创建空白项目
ionic start myApp tabs
ionic serve //浏览器运行(调试很方便)

Ionic 安装指南 通过以上步骤,您已成功安装和配置了 Ionic 环境,并创建了一个新的 Ionic 项目。现在,您可以开始开发自己的移动应用程序了。在开发过程中,请确保遵循最佳实践,以提高应用程序的质量和性能。 阅读详情

相关推荐

七步设计高频变压器

七步设计高频变压器

m0_71394959的博客 5400

ionic打包apk环境配置

ionic打包apk环境配置

qq_43554842的博客 1132

闲人闲谈PS之十二——WBS-BOM在装备制造项目中的实战解析

本文深入解析了WBS-BOM在装备制造项目中的核心应用。针对按订单设计/生产的行业痛点,WBS-BOM作为项目专属物料清单,完美连接SAP PS与PP模块,确保MRP能基于项目进行精准物料需求计算,实现从设计到生产的全链路项目化跟踪与管理。

weixin_29284885的博客 399

Ionic3安装和项目创建

Ionic3安装和项目创建

qq_17759721的博客 1万+

S32K1XX调试--快速定位HardFault

1、背景 程序运行,发现程序跑飞到HardFault,但不清楚为什么会跑到HardFault中断处理函数去。 2、分析 要想知道为什么会跑到HardFault_Handler中去,就很有必要了解一下,程序上一条执行的是那条命令。 根据汇编指令可以定位上条指令,但如果对汇编指令不是很了解的话,那就很头疼了 根据单步运行也能实现定位,但如果程序量很大,又很杂,可能花费的时间就比较久些。 3、问题查找 提供一种不需要懂汇编指令的查找方法,方法如下: 在中断处理函数中插入以下代码,以及另外定义

ping_devil的博客 4018

光耦继电器电路分析

光耦电路的分析笔记

MingYue_SSS的博客 6873

ionic3+Angular4+cordova 环境搭建(手机端App开发)

一、框架:ionic3+Angular4+cordova 二、环境搭建: 安装node.js(为了使用npm来安装ant,cordova,ionic) 安装教程:https://www.cnblogs.com/zhouyu2017/p/6485265.html 验证: 2.下载jdk,并配置环境 配置教程:https://blog.youkuaiyun.com/u012934325/articl...

fang30890的博客 3814

手把手教你用OPA运放和MOS管搭建恒流源电路(附完整电路图)

本文详细介绍了如何使用OPA运放和MOS管搭建高精度恒流源电路,涵盖核心元器件选型、电路设计、工作原理及实际搭建步骤。通过负反馈控制机制和MOS管工作区设置技巧,实现稳定的电流输出,适用于LED驱动、电池充电等场景。附完整电路图和调试技巧,助您快速掌握恒流源设计。

weixin_29239279的博客 534

ionic3环境配置、创建项目及apk打包全部详解(Android)

在打包之前先配置好环境(Android) 一、基本环境配置 1.1 nodejs (需要配置环境变量) 下载安装node.js即可,安装成功后在cmd中输入 node -v 查看是否安装成功。 1.2 jdk (配置环境变量) 安装方法:下载完成按照提示安装,不出以为安装路径为:C:\Program Files\java ,jdk安装完成,打开环境变量进行相关配置。 配置完成后...

An_zhou的博客 895

PaddleOCR GPU部署:从环境配置到避坑实战指南

本文详细介绍了PaddleOCR GPU部署的全过程,从环境配置到避坑实战指南。通过分析常见的部署失败原因,提供硬件兼容性自查、软件环境精配方案以及路径配置的解决方案,帮助用户高效完成GPU加速的OCR任务部署,避免90%的常见错误。

weixin_30839881的博客 417

NAO V6 开发环境的配置(附所有文件)

NAO V6开发环境配置前言环境Robot SettingsChoregraphe 2.8.5.10python2.7+naoqi2.8+opencv4.1.0putty与FileZilla 前言 学校的机器人摸索了一段时间,之前摸爬滚打探索环境,之前没接触这类机器人可能会非常艰辛,希望能给需要的人一些帮助。Nao与pepper通用 环境 win10(x64)+naoqi2.8 1、Robot S...

wbhhello的博客 3218

Ionic 的环境配置

Ionic 主要用于混合APP的开发,可以实现跨平台应用。 Ionic官网 http://ionicframework.com/ Ionic中文网 http://www.ionic.wang/ Ionic 的环境搭建主要分为俩种: 系统环境搭建 一:Android所需环境, Java jdk环境: 步骤:1,网上下载 Java jdk 的包,双击,执行下一步

axixizyq的博客 650

UGUI合批杀手:Mask/RectMask2D为何必断合批?

颜色缓冲负责记录像素颜色;模板缓冲负责记录“这个像素的模板值”(一个小整数);渲染时,你可以设定:只有模板值为 X 的地方才允许画;或者往某些区域写特定的模板值。类似于:先拿一支隐形笔在纸上画出一块区域,给它记一个编号“1”,后面的涂色动作只允许涂在“编号为1”的区域上。合批的前提:渲染状态不变,连续元素能一口气画完。材质、贴图、混合模式、Stencil、裁剪区域……都得一致。Mask / RectMask2D 的本质:在渲染状态上加规则——“只在某个区域内允许写像素”。

本博客聚焦游戏开发技巧、创业实战心得及大学热门课程干货。这里既有技术深度,也有思维广度,无论你是开发者、创业者还是高校学子,都能在这里找到适合自己的成长之路! 117

2 配置Ionic开发环境以及创建新的项目

1.开发环境需要的软件有:   node.js  http://nodejs.org         可以到官方网站下载对应平台的安装包安装即可,如果已经安装,需要把它升级到最新的稳定版本         在终端可以输入$node -v来查看node版本以检测是否安装成功   Ionic CLI http://ionicframework.com   Cordova...

weixin_30627381的博客 127

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

ionic5混合app开发环境配置以及项目和调试apk生成

文章目录JDK安装1.JDK的下载JDK的安装JDK环境变量配置ANDROID SDK安装Android sdk安装包下载安装配置ANDROID环境变量nodejs安装下载安装安装GIT下载安装gradle配置ionic和cordova的安装新建项目创建启动项目配置平台 ionic5混合App开发环境的配置需要安装JDK、Android SDK、NodeJS、以及GIT等,如果不想麻烦去官网下载,可在https://download.youkuaiyun.com/download/u010574271/15781729

u010574271的博客 1404

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

ionic+cordova+Android studio开发环境配置及项目打包

目录 node.js cordova ionic Android studio(Android SDK,需要配置SDK环境变量) node.js 官网下载:https://nodejs.org/en/; 命令行检测版本:npm -v cordova 命令行下载:npm install -g cordova 命令行检测版本:cordova -v Cordova框...

FangYifei的博客 2259

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Ionic CLI 自定义项目模板:如何创建和配置专属开发环境

Ionic CLI 是构建跨平台移动应用的强大工具,通过自定义项目模板,开发者可以快速搭建符合团队规范的开发环境,显著提升开发效率。本文将详细介绍如何创建、配置和使用 Ionic CLI 自定义项目模板,帮助你打造个性化的开发工作流。 ## 为什么需要自定义项目模板? 在团队开发或个人项目中,重复配置基础设置(如代码规范、目录结构、第三方库集成)会浪费大量时间。自定义项目模板可以: - **

gitblog_00942的博客 672

Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置

原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许差别请查阅相关文档即可。 原文发表于我的技术博客 1. Ionic 环境的安装 1.1 Node.js 与 npm 介绍 Node.js 与 npm 是 Ionic 环境的基础,这里我们做一...

DevOpenClub 专栏 95

Ionic新建项目(以Android为例)

Ionic新建项目(以Android为例)1.安装node.js,直接next,你懂的!2.配置环境 Java JDK,一般搞JAVA开发都配置过了,如需帮助,戳它 Apache Ant,下载地址:http://ant.apache.org/bindownload.cgi,以及配置Apache Ant地址:http://www.cnblogs.com/yuzhongwusan/archive/201

淡了点 722

安装ionic开发环境

#安装ionic开发环境 ionic是基于angularjs开发移动端hybrid app的前端框架,对于视图的路由,ionic没有使用AngularJS的路由模块(ng-route),而是使用 了angular-ui项目的ui-route模块。ionic.bundle.js已经打包了ui-...

chibenqi9310的博客 141

搭建 AngularJS+Ionic+Cordova 开发环境

搭建webapp项目 教程说起来是非常简单啊,去官网找代码也是打开了我得新世界 官网组件css: 官网css组件: http://ionicframework.com/docs/components/#header 有些效果很熟悉,原来别人的代码是这么找来的 还有一点 有些弹出框的代码我是只看见效果,没看见代码哪里找? 在win7中搭建 AngularJS+Ion

sixteen_cicle的博客 892

(转)windows下安装Ionic

原文:http://www.itwap.net/ArticleContent.aspx?id=26 Ionic官方教程:http://learn.ionicframework.com/videos/windows-android/ 以下内容参考官方教程得出。 1、下载JDK并配置好Java运行环境 下载地址:http:/...

weixin_30662849的博客 160

ionic 开发环境与打包环境配置

开发环境设置代理,打包环境设置为全路径。 一、增加配置文件 目录如下: config.dev.ts export const ENV = { api: '/api', security: '/security', }; config.prod.ts export const ENV = { api: 'http://172.18.1.133:10002...

xif3681的博客 1778

ionic android 教程,Ionic Capacitor Android环境搭建 创建项目

Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android、iOS、Electron和Web应用程序。Capacitor是Apache Cordova和Adobe PhoneGap的继承者,不仅可以把我们用html css js写的代码打包成原生app,还可以让我们使用js调用手机上面原生的Api。目前Capacitor已经成为Ionic应用程序的默认...

weixin_39652658的博客 1533

创建ionic3项目

一、前言:要想创建一个ionic3的项目的环境配置:(1)安装nodejs:官网:https://nodejs.org/en/(2)npm或cnpm 由于npm的服务器在国外,所以安装依赖的时候速度可能会很慢,这时候可以用cnpm来代替(安装淘宝镜像命令:npm install -g cnpm --registry=https://registry.npm.taobao.org ) 二、创建一个i...

蒲小若的博客 1596
上一篇: angular中如何监控页面加载完毕
下一篇: chrome浏览器调试
superjunjin
博客等级 码龄17年 600粉丝 133原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值