Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Ionic3 Start

Ionic3 Start

作者头像
spilledyear
发布于 2018-08-21 06:48:46
发布于 2018-08-21 06:48:46
1K00
代码可运行
举报
文章被收录于专栏:小白鼠小白鼠
运行总次数:0
代码可运行

本文是Ionic3系列的第一排你文章,主要介绍开发环境的搭建过程,之后的文章将依赖此应用,不再涉及到环境搭建方面的内容(除非是添加特性),Ionic官方文档:

ionic官网

ionic官方文档

本项目github地址:

github 地址

ionic打包成Android应用的详细教程,请参考参考以下链接:

ionic3 Android打包

环境准备

  • node:8.x
  • npm:5.x
  • ionic: 3.x
  • Angular:4.x
  • Cordova:7.x

工具准备

安装Node

node下载

下载完成之后:解压 》 配置环境遍历 》 测试

node自带npm,node安装成功,npm也就安装成功

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
测试命令  
node -v 
npm -v 

安装Ionic command-line tools

利用npm包管理器安装 ionic command-line tools

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g ionic
这样会安装最新版本的ionic ,  -g  代表全局安装

测试是否安装成功
ionic -v

安装Cordova

cordova是用来打包的,也就是让js有能力调用原生设备接口,利用npm包管理器安装 cordova

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g cordova
这样会安装最新版本的cordova,  -g  代表全局安装

测试是否安装成功
cordova -v

创建项目

以上就已经安装好了 ionic cli可供使用,通过 ionic cli,可以非常方便的创建一个ionic项目。同时,利用该工具创建ionic项目的时候可以选择不同的模板,也可以选择不适用模板,只需要命令后面的一个参数即可,例如,以下命令将创建一个 带有 tabs 模板的 ionic项目,通过ionic start 创建一个应用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ionic start inStart tabs

inStart是应用的名称, tabs是模板的名称。对应的,还可以使用创建没有模板的应用:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ionic start inStart blank
该命令会创建一个基于ionic 最新版本的应用

高本版的ionic cli还有很多非常好用的功能,比如

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
ionic start inStart tabs  --type ionic1
创建 一个 基于ionic1 版本的应用

ionic g page menu
该命令用于创建一个名为menu的page

以上是基于ionic cli 创建应用,ionic网还介绍了一种使用可视化工具Creator创建应用的方法,具体的不太清楚,有兴趣的可以尝试。

启动应用

这里所说的启动应用,是指启动应用在浏览器查看、调试,并不涉及到打包的内容。

启动应用比较简单,一条命令就可以搞定:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
cd  inStart 
ionic serve
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.10.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Ionic3学习笔记(一)安装、项目结构与常用命令
创建一个新项目,有blank、tabs、sidemenu3种样式可选,tutorial、super、conference为官方Demo,aws为AWS Mobile Hub Demo
Theo Tsao
2018/09/07
1.3K0
混合手机app开发之Ionic篇
本次使用的是Ionic3,之前本想用最新的ionic5 使用ionic build后发现,我使用的X5内核不能正常浏览,使用ionic3没有任何问题。本次我不使用cordova来打包,这次我将要完成的任务是:
爱上歆随懿恫
2022/08/15
9350
混合手机app开发之Ionic篇
Ionic3 开发流程
简单介绍自己使用Ionic3开发的过程,涉及到的知识点如下: Angular Ionic Cordova ES6 TypeScript Scss 环境搭建 引用插件 调试 Android打包 Android签名 IOS打包
spilledyear
2018/08/21
2K0
Ionic3 Android调试
本文主要介绍将Ionic项目打包成安卓应用之后的调试过程,调试方式分两种:模拟器调试、真机调试。不过在此之前,必须要将ionic项目成功打包成Android应用,有关 ionic打包成Android应用的具体教程,请参考以下文章: Ionic3 Android打包
spilledyear
2018/08/21
1.1K0
Ionic3 Android调试
ionic和cordova初探--从安装到运行首个app
好多人说ionic好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。
AWeiLoveAndroid
2018/09/03
3.6K0
ionic和cordova初探--从安装到运行首个app
Ionic4与Ionic3部分比较
有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。
IT晴天
2018/09/19
7.1K0
Ionic4与Ionic3部分比较
最新ionic-cli创建ionic3而非ionic4的项目
在ionic CLI v4.8.0版本创建项目时,会询问是创建ionic3还是ionic4项目,然而更新到 ionic CLI v4.10.2(latest)时,这个询问提示消失了,直接默认创建ionic3项目,而且看参数是没有创建ionic3项目支持的,于是,我上Github发了个issue: How to create ionic3 project by ionic CLI v4.10.2(latest)
IT晴天
2019/03/06
1.5K0
使用Ionic3创建原生app系统入门
地址:https://services.gradle.org/distributions/
易兒善
2018/08/21
2.1K0
使用Ionic3创建原生app系统入门
Ionic3 Android打包
所谓的Anrdoid打包,就是将ionic项目打包成一个可以安装在Android系统上的apk文件,打包的时候,使用的是cordova工具,不过在此之前,需要一些准备工作:配置JDK、Android SDk还有各个android版本包的下载,最重要的是需要成功的创建了一个Ionic项目,有关ionic项目创建的详细教程,请参考以下文章: Ionic3 Start
spilledyear
2018/08/21
9150
Ionic3 Android打包
【开发指南】(一)Ionic3开发环境配置常规ionic的环境搭建如下:
工欲善其事,必先利其器,搭好环境是开发的前提,有时环境没弄好,不时报错往往很扎心。
IT晴天
2018/08/20
2.1K0
【开发指南】(六)Ionic3从目录结构理解开发
对比目前其它流行的js框架,个人觉得其分工明确、清晰好理解,我觉得就算一开始头脑一遍空白的新手,对他讲解过一次后都能有个大致印象。
IT晴天
2018/08/20
2.9K0
ionic2 编译打包的坑,
Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio
用户1437675
2018/08/20
1.2K0
ionic2 编译打包的坑,
mac 搭建 ionic2 环境
直接去node官网上下载下来人后安装就行了,推荐使用稳定版。如果追求高版本的话可以下载测试版
用户1437675
2018/08/20
8840
mac 搭建 ionic2 环境
【开发指南】(四)Ionic3快速上手并了解这些
Ionic这几个网站是需要经常看的,应该了解过才执行后面步骤,其中强烈要求至少先撸一遍官网的组件和API文档。
IT晴天
2018/08/20
3.3K0
【开发指南】(四)Ionic3快速上手并了解这些
Ionic3 拍照上传
本文主要介绍使用cordova实现拍照上传,走通 “拍照 》预览 》上传 》 下载 ”这个流程。为了方便查看测试结果,需要了解Ionic应用调试的基本方法,有关于Ionic项目Android 调试的详细教程,请参考以下文章:Ionic3 Android调试
spilledyear
2018/08/21
1.1K0
Ionic3 拍照上传
ionic3升级适配angular5
昨天angular5和ionic3同时发布更新了,为了用上angular5的新特性,还是有必要踩下坑的,当然踩坑的白老鼠建议选用一个最近不用维护的项目。
IT晴天
2018/08/20
2.6K0
开发hydride App 安装ionic
第一次安装的时候碰到各种麻烦 后来联系安装几台电脑就觉得不是那么麻烦  主要是需要安装的东西太多,另外网速一定要好,
wust小吴
2019/07/08
1.1K0
ionic创建过程
编译成功后会在项目下的platforms/android/build/outputs/apk里面生成生成默认名字为android-release-unsigned.apk的release版本apk文件
余生
2018/10/15
1.4K0
Ionic安装环境安装关于墙国环境创建Ionic项目测试运行项目
环境安装 先安装Node.js,网址 www.nodejs.org 下载地址是:https://nodejs.org/en/download/current/, 如果不是请自行在官网上查找。安装一路
孙亖
2018/06/06
1.4K0
SNS项目笔记<一>--项目启动
在新版本下,ionic得到的健硕性的更新,angular却减少了自己的体积,正所谓:“ionic吃好了,angular减肥了”于是我们也可以抛弃以前的一些坑,直接进入流畅性的操作了。
stormKid
2018/09/12
3.1K0
SNS项目笔记<一>--项目启动
相关推荐
Ionic3学习笔记(一)安装、项目结构与常用命令
更多 >
LV.1
这个人很懒,什么都没有留下~
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档