本文合适谁？

• 本文标题强调了“零基础学习”，所以本文适合想学前端的人，如公司前端实习生，后端开发人员
• 如果你已经是1年+前端开发者，可以忽略本文前半截内容，直接跳到ionic app开发相关资源介绍，也可以给本文找毛病

本文目标

• 本文想让没有前端开发技能的人通过学习前端开发知识，来开发ionic app
• 前端开发三大基础技能知识分别是HTML、CSS和JavaScript，网上有超多学习资料，但是比较杂内容也比较多，对前端新人来说不知道哪些是重点，哪些是常用的，哪些是必须要掌握的。本文则通过开发ionic app需要学习的知识，告诉你哪些是重点
• 由于我们目标是开发app，可以不考虑语法的浏览器兼容性问题，所以在开发时优先使用新语法html5，css3和es6，所以针对新语法尤其es6需要重点学习

HTML

• html是用来写网页结构的，开发网页的第一步我们会考虑这个网页是什么样子，比如网页左边是菜单，右边是内容，内容里面有图片和文字，这种布局都是各种html标签
• 了解一下html的发展史：html发展史1、html发展史2
• 学习html—菜鸟教程html篇
  下图是菜鸟教程html篇菜单，其中红色框内是必须掌握的，如果菜鸟教程讲的不够清楚需要百度其他资料自行学习，如在MDN上搜索，黑色框内可以不用看或者说暂时不用学习，剩余的需要了解学习
  
• html学完后你应该知道：html常用标签和html5语义化标签；内联元素和块级元素分别有哪些，它们之间的差异；localStorage和 sessionStorage差异
• 本节学习预计耗时2个工作日

CSS

• html是用来写网页结构的，那css是给结构添加样式的，如字体大小、背景颜色、标签占据的尺寸和间距等都是css样式
• 了解一下css发展史：css发展史1、css发展史2
• 学习css—菜鸟教程css篇
  红色框内必知必会，黑色框内暂时不学，其他的过一遍，如果某个知识点菜鸟教程没讲清楚则自行百度
  
• css学完后你还应该知道：css选择器的优先级，css盒子模型，css定位，css弹性布局（flex布局）
• 本节学习预计耗时2个工作日

JavaScript

• html+css写出来的页面是静态网页，使用JavaScript让页面动态化，如根据从后台查询出来的数据展示在页面上
• 了解一下JavaScript发展史：JavaScript发展史1、JavaScript发展史2
• 学习JavaScript—菜鸟教程JavaScript篇
  
• 本节学习预计耗时3个工作日

ES6

• 学习ES6—菜鸟教程ES6篇
  如果菜鸟教程讲的不够明白，可以看这里：http://es6.ruanyifeng.com/
  
• 学完ES6需要熟练使用箭头函数和Promise
• 本节学习预计耗时2个工作日

前端发展史

• 请花5分钟阅读完
  https://www.cnblogs.com/kidney/p/6079530.html

选择浏览器

• 既然是前端开发，前端的界面展示，调试工作都需要在浏览器环境下运行，选择一款合适的浏览器很重要
• 关于浏览器和浏览器内核点这里
• 这里推荐使用chrome浏览器，国内的360和QQ浏览器也都是在chrome内核基础上封装的，所以我一般使用的是QQ浏览器，chrome作为备用，QQ浏览器同步书签快，应用商店不用翻墙，各种设置和快捷键更人性化

选择IDE

• 作为开发人员选择一款IDE并能够熟练使用时非常非常必要的
• 据我了解目前流行的前端IDE有sublime text3、Visual Studio Code和WebStorm
• 我这里推荐使用WebStorm，原因如下，至于你到底选择哪个都可以

  1. 除了WebStorm其他两款我基本没用过，其他两款比webstorm轻快，但没有webstorm默认集成的功能丰富
  2. WebStorm是jetbrains公司的一款产品，该公司还有写java的IntelliJ IDEA,写python的PyCharm甚至还有写android的android studio，这些产品的风格界面、设置功能大同小异，熟悉一个上手另一个很快
     
     注：该公司产品是收费的，获取注册码可以点这里

git

• 安装完WebStorm顺便安装git，git是下载代码并管理代码的工具，一般项目由多人开发，需要共享代码与资源，以及避免代码冲突；github是最知名的代码托管服务器，你可以尝试在github上搜索并下载代码到本地
• 点击这里下载git，安装过程是一路点下一步，不用更改配置
• git工具有很多命令，学习起来不容易，有兴趣可以看菜鸟教程或自行百度，WebStorm集成了git的常见操作会让git使用起来很简单，一般我们使用它更新代码、上传代码、查看代码历史记录

TypeScript

• TypeScript语法是JavaScript的更高级版，因为更高级很多语法浏览器不支持，但是TypeScript提供了编译功能，其语法在浏览器环境运行前，会先编译成浏览器支持的语法，如es6或es5
• 我们只需学TypeScript的基本语法即可，关于与项目集成和编译选项的配置我们的app项目脚手架已经配置好了
• 学习TypeScript—TypeScript中文网
  如下图TypeScript只需看红色框内的内容，学的内容不多，但是不简单，请仔细阅读
  
• 本节学习预计耗时1个工作日

Angular

• Angular目前(2018年11月27日)版本已经是7.1.x，但自从Angular2以来，基本上是向下兼容的，语法大同小异，目前使用Angular版本4、5、6居多，Angular1基本上被淘汰了
• 学习Angular—Angular中文网
  如下图尽管只需看快速上手、教程和核心知识三个菜单下的内容，Angular文档内容还是比较多的，但是文档质量很高，各位慢慢阅读
  红色区域内必知必会，黑色区域内暂时不用看，其余快速浏览一遍
  
• 本节学习预计耗时4个工作日

Ionic

• 关于ionic版本，目前(2018年11月27日)ionic稳定版本是3.9.x，因为ionic3和ionic2是向下兼容的，语法一致，所以ioinc2项目可以平滑升级到ioinc3；由于ionic1使用angular1，所以除了旧项目见得到，新项目肯定没人用ionic1开发；ionic4预计到2019年初才能发布稳定版，ionic4改动也比较大，ionic4专注做ui，至于选择vue，react还是angular作为js框架由开发者自行选择；所以我们主要学ionic3文档进行开发

• 学习Ionic—Ionic官网
  

  

• 现在（2019年2月12日 ）ionic已经发布ionic4稳定版本，如下图在官网右上角可以切换到v3文档
  

  

• 现在（2019年2月20日 ）我正在使用ionic4搭建app开发模版。注意：本文后面的项目模版及本简书教程大部分是基于ionic3开发的

• 本节学习预计耗时2个工作日

Scss/Sass

• Scss是css预编译器，也可以说是css的高级版写法，具体有啥高级特性，看完文档你就知道了
• 由于Scss完全兼容css语法，所以即使你不学scss，在.scss文件中写css也是可以的，无非就是不用他的高级特性
• Sass是Scss的简化格式，Sass用空格缩减代替花括号｛｝
• 学习Scss—Scss中文网
  如下图只需看快速入门菜单即可
  

ionic开发学习资源链接汇总

https://www.jianshu.com/p/7d1577539183

开始创建一个ionic app

• 自己创建一个新的app，随便写两个页面玩玩

  1.配置app开发环境：https://www.jianshu.com/p/1f1205602ce0
  2.创建一个app：https://www.jianshu.com/p/836392297eb9

学习ionic开发模版

• 模版源码地址：https://github.com/yanxiaojun617/ionic2_tabs/

• 模版详细介绍：http://www.jianshu.com/p/1c6e5fe9e255

  该模版实现了app开发中常用功能，组件，第三方服务等
  下载该模版并运行起来，根据里面的功能查看代码学习，最后根据你的思路模仿此模版新建一个适合自己的模版，你就通关了