前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ionic3 Start

Ionic3 Start

作者头像
spilledyear
发布2018-08-21 14:48:46
9460
发布2018-08-21 14:48:46
举报
文章被收录于专栏:小白鼠小白鼠

本文是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
复制
测试命令  
node -v 
npm -v 

安装Ionic command-line tools

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

代码语言:javascript
复制
npm install -g ionic
这样会安装最新版本的ionic ,  -g  代表全局安装

测试是否安装成功
ionic -v

安装Cordova

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

代码语言:javascript
复制
npm install -g cordova
这样会安装最新版本的cordova,  -g  代表全局安装

测试是否安装成功
cordova -v

创建项目

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

代码语言:javascript
复制
ionic start inStart tabs

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

代码语言:javascript
复制
ionic start inStart blank
该命令会创建一个基于ionic 最新版本的应用

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

代码语言:javascript
复制
ionic start inStart tabs  --type ionic1
创建 一个 基于ionic1 版本的应用

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

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

启动应用

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

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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 环境准备
  • 工具准备
  • 创建项目
  • 启动应用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档