码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2019-08-14 00:04:11      阅读:63      评论:0      收藏:0      [点我收藏+]

标签:oid   平台   运行时   studio   build   开发者   lib   ebs   ash   

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可以很容易设置好开发者账号,相对于命令行方式更加方便。

 

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

标签:oid   平台   运行时   studio   build   开发者   lib   ebs   ash   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!