kwuliu:ionic混合APP开发环境搭建

1、安装npm

通过安装Nodejs获得npm包管理工具

2、安装cnpm

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

说明:cnpm是淘宝提供的一套命令,比npm更快速

3、安装cordova

npm install -g [email protected]8.0.0

4、安装ionic

npm install -g [email protected]4.8.0

说明:

(1)一次性安装

npm install -g cordova ionic

(2)安装指定版本
    npm install -g [email protected]
    npm install -g [email protected]

(2)更新版本
    npm update -g cordova ionic

(4)卸载
    npm uninstall cordova -g
    npm uninstall ionic -g

在安装完成ionic之后,需要对/usr/local/lib/node_modules/目录进行授权设置,避免在OSX、Linux等系统上执行npm命令时出现权限不足的情况:

sudo chmod -R 775 /usr/local/lib/node_modules/

注意:授权命令后面跟着的目录结尾处必须带上 / ,否则将导致授权只到达node_modules层级,它的各个子目录和文件并没有得到对应的权限

5、创建ionic项目

cd ./Workspace/WebstormProjects
ionic start myApp tabs  // 创建底部菜单项目
ionic start myApp blank  // 创建空白项目
ionic start myApp sidemenu  // 创建侧滑菜单项目

说明:这样创建的是ionic 3项目,可以在后面带上参数[--type=angular],带上参数后创建的是ionic 4的项目

ionic start myApp tabs --type=angular

6、运行ionic项目

ionic serve

说明:执行这个命令后,会自动打开浏览器显示项目默认页面

7、添加iOS和Android平台

ionic cordova platform list
ionic cordova platform add [email protected]4.5.4
ionic cordova platform add [email protected]7.0.0

说明:第一行用于查看可用的平台包,后面两行表示添加指定版本号的iOS平台包和Android平台包

8、构建项目

ionic build ios
ionic build android

9、运行项目

(1)真机运行

ionic emulate ios
ionic emulate android

(2)模拟器运行

ionic run ios
ionic run android

(3)本地浏览器运行

ionic serve

说明:

建议在代码开发过程中,使用本地浏览器运行;

当需要真机运行时,请使用Xcode、Android Studio分别打开项目下面对应的iOS工程和Android工程,这两个工程目录会在第8步执行构建命令后生成,使用Xcode可以很容易设置好开发者账号,相对于命令行方式更加方便。

原文地址:https://www.cnblogs.com/lihailin9073/p/11349382.html

时间: 2024-10-08 17:28:43

kwuliu:ionic混合APP开发环境搭建的相关文章

Cordova+ionic 开发hybird App --- 开发环境搭建

Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次手动输入太麻烦而且都是重复劳动,于是你下决心改变这种状况,然后学会了把javac命令写到一个bat文件中,以后编译只需要单击运行即可:然后随着你敲的代码越来越多,而且有了JAVA project概念,于是你手动新建了很多文件夹比如src.bin.lib,你有写了一个bat文件来减少你的重复劳动:再后

前端移动App开发环境搭建

移动App开发环境安装 一.环境安装准备软件 二.node的安装 像安装普通软件一样,安装对应版本的node软件,安装好之后就可以运行npm命令行,比如npm init .npm install -g bower.npm install -g browser .npm install -g browser-sync.npm install -g gulp  -cli --save --dev .npm install jquery --save.等等;注意安装路径不要选中文路径,配置文件是pac

Ionic Android开发环境搭建 下

上篇 Ionic 安装完成了,由于要开发Android,所以必不可少需要继续搭建Android开发环境. 首先,下载并安装JDK.然后配置一下环境变量. 接着,下载并安装Android SDK.下载过程中,需要FQ.同时也需要配置一下环境变量. 网上还有一种比较好的方法,有IDE的可以如下设置: 最后,还需要下载并安装Apache Ant.Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具.同时,也需要配置一下环境变量. 至于环境变量怎么配,网上都是资料,很详

React Native电商项目实战混合APP开发 React Native实战 混合APP实战开发

React Native  和 angular+ionic 是目前网络上最火的混合APP开发语言,其功能强大能够开发出安卓和IOS程序! ------------------课程目录------------------ <React Native电商项目实战>├<01React Native初体验>│  ├01-React Native简介.mp4│  ├02-React Native环境搭建.mp4│  ├03-React Native初体验及其它环境搭建.mp4│  └04-R

HTML5 移动应用开发环境搭建及原理分析

开发环境搭建: 一.Android 开发平台搭建 安装java jdk:\\10.194.151.132\Mewfile\tmp\ADT 配置java jdk 1)  新建系统变量,JAVA_HOME,C:\Program Files\Java\jdk1.8.0_25 2)  新建系统变量,classpath,;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar 3)  Path,%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin 4)  测试

混合app开发

学习目标: 了解目前移动app开发的三种模式 了解mvc和mvvm架构模式 熟悉混合app的开发应用场景 掌握混合app开发的概念 掌握angularjs.ionic.和cordova在混合app开发中的作用. 目前移动app开发主要分为三种模式 Native App . Web App .Hybrid App 原生ap是使用相应平台特有的开发工具进开发 外观和性能极佳 但开发成本高 因为每一种移动操作系统都需要独立开发项目 web App 网页应用程序 需要依赖于移动端浏览器 主要使用html

微信开发学习总结(一)—微信开发环境搭建

目前移动App开发领域主要分为以下几种类型: 一.微信开发环境搭建 1.要有一个用来测试的公众号. 2.用来调式代码的开发环境 1.1.注册测试公众号 微信公众号分为服务号.订阅号.企业号,订阅号可以个人申请,服务号和企业号要有企业资质才可以. 我们所说的微信公众号开发指的是订阅号和服务号. 关于订阅号和服务号的区别,官方是这样解释的 服务号:主要偏向于服务交互(功能类似12315,114,银行,提供绑定信息,服务交互),每月可群发4条消息:服务号适用人群:媒体.企业.政府或其他组织. 订阅号:

打造理想的Windows 10 APP开发环境的5个步骤

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软即将发布Windows 10手机版,实际上很多人现在已经开始在开发Windows 10 APP了.今天推荐的文章简单介绍了如何搭建一个理想的开发环境. 周末一个大学同学到访成都,所以停更了2天.今天时间也不多,就推荐一个简单的文章,作者Michael Crump在这篇文章中分享了如何打造理想的Windows 10 APP开发环境的5个步骤. 分别是: 安装一个干净的系统.要更好的使用Win

XE6移动开发环境搭建之IOS篇(7):在Mac OSX 10.8中安装XE6的PAServer(有图有真相)

XE6移动开发环境搭建之IOS篇(7):在Mac OSX 10.8中安装XE6的PAServer(有图有真相) 2014-08-22 21:06 网上能找到的关于Delphi XE系列的移动开发环境的相关文章甚少,本文尽量以详细的内容.傻瓜式的表达来告诉你想要的答案. 在安装PAServer前,我们先配置一下MAC的IP,给定一个固定的内网IP,以便我们的XE6能更好地连接它!------------------------------------------------------------