初次尝试Ionic,边学习边记录下来,以免以后忘记了,入坑向( ̄ω ̄;)

1.Ionic环境安装

Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs。下载安装:http://nodejs.org/

这里选择下载推荐大多数用户使用的

安装完成后打开CMD执行node -v和npm -v命令,返回版本号表示已安装成功。

然后执行npm install -g cordova ionic命令安装cordova和ionic

PS:安装过程中可能需要FQ,最好挂上VPN安装。

安装完执行ionic -v,返回版本号表示已安装成功。

2.Ionic项目创建

Ionic安装完成后,我们就可以开始创建我们的Ionic项目啦!

Ionic官网提供了三个项目模板blank(空模板)、tabs(带选项卡的模板)和sideMenu(带侧边栏的模板),这里我推荐使用tabs创建我们的第一个Ionic项目。

1、首先进入到需要创建项目的目录,然后执行下面的命令创建项目(IonicDemo是项目名,tabs是模板)

ionic start IonicDemo tabs

2、这里询问是否使用Ionic 4,我这里选否使用Ionic 3,然后等待下载

3、下载完后,询问是否将此项目添加到Ionic Appflow(大概类似于一个源代码管理可以连接到GItHub,不过需要注册Ionic账号),我这里选否

这样你的第一个Ionic项目就创建成功了。

3、运行Ionic项目

进入到你创建的Ionic项目目录,然后执行ionic serve就可以在浏览器运行启动你的项目了!

界面如图:

至此Ionic的环境搭建及创建就完成了。

接下来就是项目的使用和打包了

打包的话,如果你没有搭建Android环境请移步下一篇:Android环境搭建及Ionic打包(win7)

ionic3使用教程(我也在学习 ̄ω ̄=):https://www.jianshu.com/p/1baf40713c1c

文章参考出处:https://blog.csdn.net/i348018533/article/details/47258449

Ionic3环境搭建及创建的更多相关文章

  1. 从零开始学Xamarin.Forms(二) 环境搭建、创建项目

    原文:从零开始学Xamarin.Forms(二) 环境搭建.创建项目 一.环境搭建 Windows下环境搭建:     1.下载并安装jdk.Android SDK和NDK,当然还需要 VS2013 ...

  2. vue--1.环境搭建及创建项目

    转自https://blog.csdn.net/junshangshui/article/details/80376489 一.环境搭建及创建项目 1.安装node.js,webpack 2.安装vu ...

  3. 【Android】cocos2d-x-3.1.1环境搭建与创建工程( Win7 32位系统)

    参考资料: http://blog.csdn.net/wxc237786026/article/details/32907079 1.环境搭建 2.创建工程 2.1 VS2012运行 2.2 Andr ...

  4. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  5. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...

  6. 1.RN环境搭建,创建项目,使用夜神模拟调试

    1.环境搭建(Yarn.React Native 的命令行工具(react-native-cli)) npm install -g yarn react-native-cli 具体参考 参见官方(中文 ...

  7. VUE环境搭建、创建项目、vue调试工具

    环境搭建 第一步 安装node.js 打开下载链接:   https://nodejs.org/en/download/    这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...

  8. [ExtJs6] 环境搭建及创建项目

    1. 环境搭建 sencha cmd 和 extjs6 sdk. sencha cmd: https://www.sencha.com/products/extjs/cmd-download/ ext ...

  9. Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目

    之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...

随机推荐

  1. Eclipse 中出现红色下划波浪线与红色感叹号

    一直用eclipse写Python,老是看到一些字符串都给出红色波浪线, 看着就不舒服.弄了老半天终于消除了,原来是拼写检查 Windows->Preferences->General-& ...

  2. linux用户的增加与删除

    sudo useradd xxx 仅仅是添加用户, 不会在home目录添加帐号很简单 Ubuntu中提供了两种方式 图形界面 增加 和 Windows 一样 ,还有一种就是 Linux传统的 增加方法 ...

  3. leetcode Ch8-Others

    1. Rotate Image 旋转图像 顺时针旋转90度:先沿水平线翻转,再沿主对角线翻转. 逆时针旋转90度:先沿竖直线翻转,再沿主对角线翻转. 顺时针旋转180度:水平翻转和竖直翻转各一次. 逆 ...

  4. CSMA/CD 续

    重要特性 以太网不能进行全双工通信而只能进行双向交替通信(半双工通信).每个站在发送数据之后的一小段时间内,存在着遭遇碰撞的可能性. 这种发送的不确定性使整个以太网的平均通信量远小于以太网的最高数据率 ...

  5. 今天开始每天一点ffmpeg知识。千里之行 。

    今天开始每天一点ffmpeg知识.千里之行 .

  6. [转]unix/linux中的dup()系统调用

    [转]unix/linux中的dup()系统调用    在linux纷繁复杂的内核代码中,sys_dup()的代码也许称得上是最简单的之一了,但是就是这么一个简单的系统调用,却成就了unix/linu ...

  7. GET POST 传值与接收案例

      第一种:GET传递 前台 ajax   GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: fu ...

  8. Shell的egrep、grep、fgrep命令的使用

    Linux egrep 命令用于在文件内查找指定的字符串.与grep-E使用语法及参数相似,不同点在于解读字符串的方法. 语法: egrep [范本模式] [文件或目录] 参数说明: [范本模式]:查 ...

  9. 聊聊host中ip/域名映射记录的解析规则

    今天宝叔突然在群里发了个问题; host做如下配置,a.com会指向哪里?或者说ping一下a.com结果会是什么? 127.0.0.1 a.com 192.168.4.106 a.com 192.1 ...

  10. Java基础知识强化之集合框架笔记76:ConcurrentHashMap之 ConcurrentHashMap简介

    1. ConcurrentHashMap简介: ConcurrentHashMap是一个线程安全的Hash Table,它的主要功能是提供了一组和Hashtable功能相同但是线程安全的方法.Conc ...