ionic3 零基础入门(一)

教程中可能存在因个人能力不足而导致的错误,若有疑问请在评论区提出。

 

本篇目录:

一.什么是
ionic?

二.ionic环境搭建

三.通过cmd创建你的第一个ionic应用

 

一.什么是ionic?

       ionic是一个混合应用开发框架。它的特点是跨平台——即只编写一次代码便可以在Android、ios上运行。

       “混合应用”:是
app 的一种,可以理解为:混合应用 = 网页 +
硬件控制部分。

       “框架”:可以理解为是一套准备好的工具和材料——就像成套卖的乐高积木一样,你可以按照他的规则来在一定程度上自由地创建你想要的东西。

 

二.ionic环境搭建

      
“环境”:让ionic框架可以在你的电脑上正常运行的配套设施。比如说你的电脑是个大屋子,屋子里面原来是养猫的,就有很多给猫生活的配套设施——床,猫粮,水桶以及毛线球等等。如果你突然打算养鱼——假设ionic是鱼——你就需要在屋子里添加鱼缸、净水系统、给水打氧的小气泵以及防猫抓鱼的鱼缸盖子。包括ionic这条鱼本身在内,为了它生活而存在的东西组成的一整套东西就是环境。

       “搭建”:就是弄来正确的东西,放在正确的位置上并确保正确运行。

 

2.1:下载、安装 jdk :http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

下载之后按照这个来   https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html

如果你的电脑里原来有jre,就按他说的来,如果没有就不用管

2.2:下载、安装node.js: https://nodejs.org/en/

        注意要下载LTS版本!下完后安装,一路下一步就行

 

2.3:打开cmd(不会的话自己百度)

       运行 (把这句话粘贴进去然后按回车):npm config set registry "https://registry.npm.taobao.org"

       再运行:npm
install -g cnpm --registry=https://registry.npm.taobao.org

   

     进行中

   这就是完成了

再运行: cnpm install -g ionic cordova

这就是完成了

2.4:下载文本编辑器,推荐sublime text3,去官网下就行,虽然要钱但是也能免费用。一定要下最新版本!然后安装包控制,再通过包控制安装typescript高亮插件,你也可以安装别的很棒的插件。

包控制安装:打开sublime,按ctrl+~键(就是tab键上面,数字1左边,esc下面那个按键,上面画个浪线的。这两个按键一起按下去)在窗口下面出现一个可以输入东西的输入框,复制一下这段代码粘贴进去,然后按下回车键。

 ---------------------

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

------------------------------

文本编辑器,就是编辑文本的软件。我们进行的代码编写工作本质就是在用键盘打一些字母上去。

包控制:这个译名不一定准确,原名叫package
control。看起来挺高级但其实就是用来管理插件包的,插件包就相当于是游戏里的装备,你加了什么装备就会有哪方面的加强。比如买了很牛的运动鞋你就会比穿拖鞋跑得快一些。

完成安装后,按下ctrl+shift+p(若你用的mac,把ctrl换成command),窗口中间会弹出一个框框,在里面输入pci(或package
control),就会有一个选项出来,上面写着“package
control:install”之类的,选那个,确认,稍等会出现新的框框,在里面输入typescript,然后选择第一个就行,耐心等待。这时窗口左下角会出现一个奇奇怪怪的动画图标一样的东西,那其实就是告诉你他在执行你的命令,等他消失了就ok了

 

2.5:下载Google chrome浏览器并设置为默认浏览器(不会就百度吧。。)

 

3.1:创建并打开你的第一个 ionic 项目

       找一个你看着顺眼的地方,新建一个文件夹(路径最好是英文的!别起一个中文文件夹的名字),打开,点击地址栏,输入cmd,回车。在cmd中输入“ionic 
start myFirstIonic tabs”,回车

要打开cmd,就像这样

      指令解释:ionic:指使用ionic的指令;start:ionic指令中的新建项目;myFirstIonic就是项目名,起什么随便。注意,在做前端编程时打各种多个单词组成的词组、名称我们一般用“驼峰风格”。即第一个单词首字母小写,从第二个单词开始每个都大写。如:myFavouriteDog,stupidFish等。有些地方可能不是这样的,不确定的时候就看看上下文和他长得差不多的怎么写,和前辈写的保持一致一般不会错的。tabs是一种app类型,就是长得像qq的主页那样下面三个按钮可以换页面的app

耐心等

然后他报错了,让你去装git

我们进入他给出的网址,进去找说明,里面说windows要安装这个东西就去这个网页:https://git-scm.com/download/win

进去之后会自动下载一个安装文件,我们装上它,一路无脑下一步就行。。

 

安装完成,我们先关闭cmd窗口再重新打开,然后再来一遍上面那条 ionic start命令。

他这里会问你是否覆盖上一个,为了避免出现差错,我们按下键盘上的y然后按下回车

 

他又问我们要不要连接到这个东西,我们不连接他,所以打n,回车

然后,他又报错了,报错信息的提示说让我们按照他说的做这个事情。

注意,他说的都是英语——也就是说,他说的都是人话——别因为这话写在了看着逼格满满的黑框窗口里你就觉得你看不懂,你把这些字仔细读读,我相信只要你稍微认真地听过英语课你就能大致知道他要你干嘛。窃以为学习编程最重要的就是不要怂,他显示出什么东西你就去读一读,读不懂就去百度一下,感觉好像知道应该怎么办了就去试试

那么我们就按照他说的来,填上你的电子邮箱,回车

他连个反应也没有——没关系,我们继续,第二行复制粘贴过去,填上你的名字,回车

###上面填的是我个人的邮箱和名字,可别和我填的一样啊!

 

好了,我们再

执行一遍新建项目——ionic
start,确认覆盖,等待

如果字是绿色的,一般就没什么问题。看他的最后一句话,明确告诉了你该干嘛——你该进入刚刚创建的项目了,就输入:cd
.\abc(我新起的项目名字叫abc,如果你一直顺着教程下来,应该要把我写的abc改成myFirstIonic)

然后运行:ionic serve

如果出现这样的窗口就点允许访问

3.2:启动你的
ionic 项目

     上面教ionic serve的方法,等效于直接进入你的文件夹中叫做myFirstIonic的文件夹,在里面启动cmd,运行ionic serve。没有意外的话chrome浏览器就会自动启动,上面显示着一个像app一样的界面啦,这时你再点击浏览器右上角的菜单按钮,在里面找:更多工具→开发者工具,点一下,界面就变啦,再点一下地址栏下面那一排偏右侧console字样左边的那个小手机一样的按钮,你就会看到你的第一个app啦!你可以点击如下图所示的地址栏写着localhost字样的位置正下方那个向下指的小三角,选择你喜欢的机型,然后刷新网页就可以用对应机型的特点进行浏览了

时间: 2024-08-02 23:36:33

ionic3 零基础入门(一)的相关文章

移动交互小白零基础入门学习笔记之:手势篇

此贴为零基础入门学习贴,总结和积累些基础知识~ 1.基本手势 触屏设备中多样的手势操作,都是由这10种基本手势组合演变而来. 2.常用动作 基本动作是触屏界面中最常用的动作,如打开.选择等. 与对象有关的动作是对屏幕上某一目标对象的操作,如调整图片的位置大小,选择.删除或移动一个文件等. 导览动作是对屏幕视图的操作,如切换屏幕.滚动屏幕.缩放网页等. 画图示意动作是用画图的方式来示意某些操作,这些图形最好是常见易画的图形,符合用户心理预期,如画勾表示确认,画叉表示取消. 以上都是触屏设备中常用的

Bootstrap零基础入门教程(三)_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.

Bootstrap零基础入门教程(二)_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.

零基础入门深度学习(6) - 长短时记忆网络(LSTM)

在上一篇文章<零基础入门深度学习(4):循环神经网络>中,我们介绍了循环神经网络以及它的训练算法.我们也介绍了循环神经网络很难训练的原因,这导致了它在实际应用中,很难处理长距离的依赖.在本文中,我们将介绍一种改进之后的循环神经网络:长短时记忆网络(Long Short Term Memory Network, LSTM),它成功地解决了原始循环神经网络的缺陷,成为当前最流行的RNN,在语音识别.图片描述.自然语言处理等许多领域中成功应用.   但不幸的一面是,LSTM的结构很复杂,因此,我们需

深度学习真的可以零基础入门吗?

我们先来谈谈自学深度学习最大的问题. 现在搞深度学习的,十之八九并不是"科班出身". 这就导致:如果你想要跨行成为一名深度学习工程师,从头到尾的一切,都基本靠自学.但是,开发者很快就会发现自己遇到了第一个障碍: 绝大多数的学习资源以理论研究为导向,轻工程实践. 其实这也难怪.这几年,深度学习是火了,但大牛们都来自学界,例子不胜枚举:比如谷歌云首席科学家李飞飞.主管 FAIR 的 Yann LeCun.在谷歌大脑的 Ian Goodfellow,以及在过去三年里任百度首席科学家的吴恩达.

七天LLVM零基础入门(Linux版本)------总结

七天LLVM零基础入门这系列文章,为了让刚接触LLVM的人在最短的时间内快速的熟悉LLVM.这系列文章,现在经过将近一年的时间的使用,有了不少反馈的意见,现在将这些情况总结一下. 1. 在按照这个七天的学习计划进行的学习过程中,不少人出现了延误现象,主要体现在读文档的时候,读的过于仔细,然后感觉时间不够用.虽然在文档上花了很长时间,但是到最后该用文档中的东西的时候,反而无从下手.出现这个问题,主要还是不会把握文档的重点,这个系列中列出来的文档,在日后接触LLVM的过程中,需要不断的去读,反复的去

零基础入门深度学习(1):感知器,激活函数

零基础入门深度学习(1) - 感知器零基础入门深度学习(2) - 线性单元和梯度下降零基础入门深度学习(3) - 神经网络和反向传播算法零基础入门深度学习(4) - 卷积神经网络 零基础入门深度学习(5) - 循环神经网络. 零基础入门深度学习(6) - 长短时记忆网络(LSTM). 无论即将到来的是大数据时代还是人工智能时代,亦或是传统行业使用人工智能在云上处理大数据的时代,作为一个有理想有追求的程序员,不懂深度学习(Deep Learning)这个超热的技术,会不会感觉马上就out了?现在救

七天LLVM零基础入门(Linux版本)------第七天

作者:snsn1984 这是这一次零基础入门的最后一天,这次的主要任务是实战一个Pass. 任务描述: 实现一个Pass,该Pass可以读取一个程序中所有的for循环的循环头的名字并输出. 同时,实现一个测试用例去测试输出的结果是否正确.该Pass的输入应该包含嵌套 循环. 在这个任务完成之后,应该已经达到可以达到可以分析和实现LLVM的Pass,查找和 分析LLVM的源码,查找需要使用的文档,并且可以知道下一步该如何自己学习LLVM. -----------------------------

零基础入门深度学习(五):长短时记忆网络

在上一篇文章<零基础入门深度学习(4):循环神经网络>中,我们介绍了循环神经网络以及它的训练算法.我们也介绍了循环神经网络很难训练的原因,这导致了它在实际应用中,很难处理长距离的依赖.在本文中,我们将介绍一种改进之后的循环神经网络:长短时记忆网络(Long Short Term Memory Network, LSTM),它成功地解决了原始循环神经网络的缺陷,成为当前最流行的RNN,在语音识别.图片描述.自然语言处理等许多领域中成功应用.   但不幸的一面是,LSTM的结构很复杂,因此,我们需