职位名称:前端开发工程师
学习概要: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官网
|