前端开发工程师从入门到精通资源总结分享

前端开发工程师从入门到精通资源总结分享
  职位名称:前端开发工程师
 
  学习概要:1、先了解基础,html/css/JavaScript是基础。html/css就是做静态页面的,javascript是做动态的。
 
  2、学习框架:jQuery(基于DOM,必学),三大主流框架:Vue、React、Angular。
 
  其他框架:Bootstrap(CSS框架),jquery-ui,Echarts(制图)
 
  vue框架:Element-UI,iview
 
  nodejs框架:express, koa
 
  3、后台语言:Node.js(事件驱动),Java(运用广泛)
 
  1、编程工具:(1)sublime text3,简单方便,下一个安装就行了。如果想用的更加方便,可以百度一下常用的插件,安装几个最常用的就够了。
 
  用Package Control安装插件的方法:
 
  (1)按下Ctrl+Shift+P调出命令面板
 
  (2)输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件
 
  下载安装及插件参考:sublime text 3下载与安装详细教程
 
  (2)visual studio code:vscode官网
 
  开始用sublime,目前转用vs code,比sublime更加方便
 
  2、制图:ECharts:直接进官网看教程,简单的可以在线制作后取用代码;可以参考博客EChart.js 简单入门
 
  iconfont:阿里巴巴矢量图库,vue项目中引入字体库(icon)(详细步骤)
 
  3、调试:在任意浏览器中按F12(工具里面的开发者工具),或者点右键检查,会出现控制台,推荐谷歌浏览器
 
  4、http请求的资源库:JSON库、Translate API、Bootswatch样式
 
  5、GitHub:代码托管,团队合作的利器,开发者可以上传自己的代码,也可以下载别人的代码,具体使用参考博客:使用Git将本地项目上传到Github操作详解、Git克隆、修改、更新项目,及查看项目地址命令
 
  SVN:如何在Eclipse上使用SVN,安装、提交、拉取代码、解决冲突等操作
 
  6、码云:基于 Git 的完全免费的代码托管服务,与 github 的对比
 
  优点:服务器在国内,在国内访问速度比github快很多,可以免费让自己的仓库他人不可见,但是否安全就不知道了。访问速度很快,支持svn,git两种方式,免费账户同样可以建立 私有项目,而 github 上要建立私有项目必须 付费。
 
  缺点:每个仓库有1G的容量限制,把Unity工程弄上去一下就超了。
 
  1、博客园:
 
  推荐博客:古兰精 ,bergw
 
  2、CSDN:
 
  1、先看慕课网的基础教程:HTML+CSS基础课程(非常适合零基础入门)
 
  其他教学视频:极客学园(需要会员,我没有看)
 
  网易云课堂:
 
  2、学习CSS布局
 
  学习完上面的课程可以自己做静态网页了,不过免费课程里面对新增的flex布局讲解的比较少,基本是一带而过,学习flex布局可以看阮一峰的博客。个人感觉flex布局非常实用,像淘宝网的九宫格图片(店铺装修里面一行显示几件商品)、移动端等,使用flex布局非常方便。
 
  3、响应式布局
 
  简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
 
  流式布局和弹性布局及配合媒体查询 是 响应性布局的最好方式。
 
  4、文字笔记类知识:菜鸟教程,w3school
 
  html/css知识点非常多,全部记的清清楚楚不太可行,有个印象之后,把这两个网站当成字典,需要的时候翻一翻。
 
  5、CSS预处理器:sass、less、stylus
 
  学习一种即可,我用的stylus:stylus使用文档总结:选择器+变量+插值+运算符+混合书写+方法
 
  1、先看智能社的视频教程:JavaScript从入门到精通 (个人觉得这个视频讲的最好,但基础不够全面)、
 
  2、js基础学习之后可以做点小游戏,我参考下面的实战视频中的小蜜蜂游戏做了一个气球射击游戏。
 
  网易云课堂的实战视频教程:HTML5前端开发实战
 
  3、ES6:也称为ECMAscipt2015,三大主流框架都是以ES6为基础的,所以无论是深入学习JS,还是想学习基于数据的框架,这都是必学的。
 
  4、书籍推荐:《JavaScript权威指南》([美] David Flanagan 著,淘宝前端团队 译,机械工业出版社)
 
  基于jquery的可查询多级select控件(可记录历史选择)
 
  1、vue.js是一个构建数据驱动的 web 界面的渐进式框架。官网讲解的比较详细:Vue.js
 
  不过,学vue之前要先学习ES2015(ES6),看这篇博客就够了(有上、下两篇):ES6/ES2015核心内容(上)、ES6/ES2015核心内容(下)
 
  如果学过ES6,可以直接跳过
 
  2、网易云视频教程:两个视频虽然是不同人讲的,但重叠的不算多,知识互补
 
  (1)建议先看
 
  (4)  单知识博客:深入理解vue中的slot与slot-scope
 
  vuex最简单、最详细的入门文档、vuex2.0 基本使用(1) --- state、完全掌握 Vuex 图文视频教程
 
  (1)mock大法好、Mock.js使用、如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发、vue项目中使用mockjs模拟接口返回数据
 
  (2)Axios 中文说明,博客:Axios使用文档总结、axios
 
  (3) axios调取本地mock模拟数据详细讲解
 
  5、ElementUI:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库; Iview:比较全的ui组件库,有基于vue.js的,有专门移动端用的,也有小程序的;
 
  6、案例:使用vuejs2.0和element-ui 搭建的一个后台管理界面、Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统、vue2.0实现注册登录步骤详解
 
  1、NPM下载东西,具体安装使用看的这篇博客:安装Node.js、npm和环境变量的配置;node中文网
 
  2、视频资源:Node.js进阶教程第一步(基础篇)(免费资源)
 
  3、项目经验:全栈02 Koa2+Vue2+MySQL 全栈的入门尝试
 
  2、JSCompress: 合并压缩代码的软件,老项目优化用的这个。JSCompress官网

推荐阅读