Ionic3环境搭建及创建
初次尝试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环境搭建及创建的更多相关文章
- 从零开始学Xamarin.Forms(二) 环境搭建、创建项目
原文:从零开始学Xamarin.Forms(二) 环境搭建.创建项目 一.环境搭建 Windows下环境搭建: 1.下载并安装jdk.Android SDK和NDK,当然还需要 VS2013 ...
- vue--1.环境搭建及创建项目
转自https://blog.csdn.net/junshangshui/article/details/80376489 一.环境搭建及创建项目 1.安装node.js,webpack 2.安装vu ...
- 【Android】cocos2d-x-3.1.1环境搭建与创建工程( Win7 32位系统)
参考资料: http://blog.csdn.net/wxc237786026/article/details/32907079 1.环境搭建 2.创建工程 2.1 VS2012运行 2.2 Andr ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- vue环境搭建与创建第一个vuejs文件
我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...
- 1.RN环境搭建,创建项目,使用夜神模拟调试
1.环境搭建(Yarn.React Native 的命令行工具(react-native-cli)) npm install -g yarn react-native-cli 具体参考 参见官方(中文 ...
- VUE环境搭建、创建项目、vue调试工具
环境搭建 第一步 安装node.js 打开下载链接: https://nodejs.org/en/download/ 这里下载的是node-v6.9.2-x64.msi; 默认式的安装,默认 ...
- [ExtJs6] 环境搭建及创建项目
1. 环境搭建 sencha cmd 和 extjs6 sdk. sencha cmd: https://www.sencha.com/products/extjs/cmd-download/ ext ...
- Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目
之前学AngularJS,教程过了一遍觉得很简单,但真正写几个Demo就错误百出,一个小小的功能要折腾很久.所以这次学Ionic,准备以开发一个项目为切入点去学,那么问题来了,开发什么项目呢? 纠结了 ...
随机推荐
- integer storage and decimal storage differences in java
package storage.java; public class StorageJava { public static void main(String[] args) { byte b = 1 ...
- IEC62304软件维护框架
软件维护计划的任务 建立接收.记录.评估.解决和追踪医疗器械软件发行后的反馈 制定确认反馈是否是问题的标准 使用风险管理过程 使用配置管理过程 制定升级.补丁以及遗留问题修正计划 问题和修改分析的任务 ...
- d3js selections深入理解
D3 selections选择DOM元素以便可以对这些dom元素做相应的操作,比如:更改其style,修改其属性,执行data-join操作,或者插入.删除相应elements 比如,如果给定5个ci ...
- Azure 虚拟机如何配置 AntiMalware
本文仅演示通过 PowerShell 方式安装并配置 AntiMalware 的过程. 经典虚拟机 立即访问http://market.azure.cn 加载 Antimalware ...
- matplotlib点线 坐标刻度 3D图绘制(六)
plot语句中支持除X,Y以外的参数,以字符串形式存在,来控制颜色.线型.点型等要素,语法形式为: plt.plot(X, Y, 'format', ...) 1 点和线的样式 颜色 参数color或 ...
- HBase编程 API入门系列之create(管理端而言)(8)
大家,若是看过我前期的这篇博客的话,则 HBase编程 API入门系列之put(客户端而言)(1) 就知道,在这篇博文里,我是在HBase Shell里创建HBase表的. 这里,我带领大家,学习更高 ...
- 关于 Can't connect to MySQL server on 'localhost' (10061) 的一个解决方案
问题描述: 使用Navicat for mysql 无法远程连接到本地数据库,提示Can't connect to MySQL server on 'localhost' (10038) . 本地服务 ...
- flume MemoryChannel 源代码解析
1.先分析三个LinkedBlockingDeque<Event>类型的takeList,putList,queue putList: 存放的是来自source生产的数据,通过调用doP ...
- BZOJ3926:[ZJOI2015]诸神眷顾的幻想乡(广义SAM)
Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...
- element-ui : <el-table> 按钮点击操作阻止@row-click
描述:<el-table> 点击行时,会跳转到一个详细信息页面, 但是同时这一行也有编辑和删除按钮. 问题: 在点击按钮时,@row-click事件也被触发了,而我并不想触发 row-cl ...