- 原文不知道什么原因被锁定了，已发邮件咨询原因，所以先再发一遍(┬＿┬)—（2019年2月21日）
本文合适谁？
- 本文标题强调了“零基础学习”，所以本文适合想学前端的人，如公司前端实习生，后端开发人员
- 如果你已经是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个工作日
前端发展史
选择浏览器
- 既然是前端开发，前端的界面展示，调试工作都需要在浏览器环境下运行，选择一款合适的浏览器很重要
- 关于浏览器和浏览器内核点这里
- 这里推荐使用chrome浏览器，国内的360和QQ浏览器也都是在chrome内核基础上封装的，所以我一般使用的是QQ浏览器，chrome作为备用，QQ浏览器同步书签快，应用商店不用翻墙，各种设置和快捷键更人性化
选择IDE
- 作为开发人员选择一款IDE并能够熟练使用时非常非常必要的
- 据我了解目前流行的前端IDE有sublime text3、Visual Studio Code和WebStorm
- 我这里推荐使用WebStorm，原因如下，至于你到底选择哪个都可以
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开发模版
-
模版详细介绍：http://www.jianshu.com/p/1c6e5fe9e255
该模版实现了app开发中常用功能，组件，第三方服务等
下载该模版并运行起来，根据里面的功能查看代码学习，最后根据你的思路模仿此模版新建一个适合自己的模版，你就通关了
网友评论