淘先锋技术网

首页 1 2 3 4 5 6 7

WEB（大前端）开发学习路线

大前端时代盛行，当下应该如何学习web前端融入当中，真正的大前端是指什么？与其对应的是小前端吗？如何才能成为大前端，需要从何学起？下面小编整理了一部分当下大前端所必须掌握的技术，详情如下：

在这里插入图片描述
web前端学习群606721798
大前端工程师

第一阶段：前端页面重构

项目一、PC端网站布局项目

  • HTML基础，CSS基础，CSS核心属性

  • CSS样式层叠，继承，盒模型

  • 容器，溢出及元素类型

  • 浏览器兼容与宽高自适应

  • 定位，锚点与透明

  • 图片整合

  • 表格，CSS属性与滤镜

项目二、HTML5+CSS3基础项目

  • HTML5新增的元素与属性

  • 表单域增强元素

  • CSS3选择器

  • 文字字体相关样式

  • CSS3位移与变形处理

  • CSS3 2D转换与过度动画

  • CSS3 3D转换与关键帧动画

  • 弹性盒模型

  • 媒体查询

  • 响应式设计

项目三、WebApp页面布局项目

  • 移动端页面设计规范

  • 移动端切图

  • 文字流式/控件弹性/图片等比例/特殊设计的100%布局

  • 等比缩放布局

  • viewport/meta

  • rem/vw的使用

  • flexbox详解

  • 移动web特别样式处理（reset, 1px border, 高清图片）

第二阶段：JavaScript高级程序设计

项目四、原生JavaScript交互功能开发项目

  • 基本语法

  • 循环语句

  • 函数与数组

  • String与Date

  • BOM与DOM

  • 事件

  • 拖拽效果

  • cookie存储

  • 正则表达式

  • Ajax

  • 面向对象基础

  • 运动与游戏开发

项目五、面向对象进阶与ES5/ES6应用项目

  • Promise/A+

  • 设计模式（观察者模式等）

  • 原型链

  • 构造函数

  • 执行上下文栈与执行上下文

  • 变量对象与活动对象

  • 作用域链

  • 闭包

  • this

  • ES5

  • ES6

项目六、JavaScript工具库自主研发项目

  • DOM库

  • 事件库

  • AJAX库

  • 原型和继承库

  • MVVM核心库

  • 基于SPA的路由库

第三阶段：PC端全栈项目开发

项目七、jQuery经典交互特效开发

  • 时间轴特效

  • tab页面切换效果

  • 网页定位导航特效

  • 滑动门特效

  • 焦点图轮播特效

  • 导航条菜单效果

  • 瀑布流特效

  • 弹出层效果

  • 倒计时效果

  • 抽奖效果

项目八、PHP+MySQL后端基础项目

  • PHP

  • MySQL

  • HTTP(s)协议详解

  • Ajax进阶、跨域与Defered

  • Apache与Nginx 环境搭建与配置

  • 接口的定义

  • Mock数据

  • Restful

  • 前后端联调

  • 前端安全(XSS,CSRF,JSON注入)

项目九、前端工程化与模块化应用项目

  • Gulp

  • Webpack

  • NPM

  • Git/SVN

  • CommonJS

  • AMD

  • CMD

  • ES6模块化

项目十、PC端全栈开发项目

  • 大首页、列表页与详情页

  • 展示与交互特效

  • 搜索

  • 登录与注册

  • 购物车

  • jQueryUI 与 jQuery EasyUI

  • Bootstrap(ACE)

  • Highcharts/Echarts

  • ArtTemplate

  • velocity

  • smarty

  • 云平台系统前端

JavaScript高级程序设计

第四阶段：移动端WebApp开发

项目十一、应用Vue.js开发WebApp项目

  • Vue.js基础

  • 模块化

  • 单文件组件

  • 路由

  • 与服务器通信

  • 状态管理

  • 单元测试与生产发布

  • 服务端渲染SSR与Nuxt.js

  • 基于Vue.js企业级项目开发(Mint UI, Element UI)

项目十二、应用React.js开发WebApp项目

  • ReactJS基础

  • JSX语法

  • 组件

  • flux+Redux

  • React

-Router路由

  • 动画效果

  • 基于React 企业级项目研发( Antd, Antd Mobile)

项目十三、应用Angular开发WebApp项目

  • TypeScript 基础与进阶

  • 开发环境配置

  • Hello World

  • 架构、模块与组件

  • 模板

  • 元数据、数据绑定与数据显示

  • 表单

  • 服务与指令

  • 依赖注入

  • 路由

  • Ionic 3 MUI框架

  • 项目实战

第五阶段：混合(Hybrid,RN)开发

项目十四、微信公众号开发

  • 初识微信公众号

  • 订阅号的基本功能

  • 使用百度BAE实现代码的快速上线

  • 使用Git完成线上代码部署

  • 公众号开发权限及功能接入

  • 微信JSSDK接口API

  • 微信场景项目开发与接入

项目十五、微信小程序开发

  • 微信小程序初探

  • 小程序入门必学

  • 小程序组件体验

  • 小程序大功能

  • 项目实战带你征服小程序

项目十六、React Native

  • React Native初探

  • React Native 项目导航

  • React Native 项目文本框

  • React Native 项目滚动分页

  • React Native 项目第三方登录

  • React Native 其他组件

项目十七、各类混合应用开发

  • 自主原生Navtive Hybrid(iOS、Android)

  • 第三方Hybrid框架Cordova/Phone gap

  • 第三方Hybrid框架MUI + HTML5+

第六阶段：NodeJS全栈开发

项目十八、Node.js基础项目

一、NodeJS基础

  • NodeJS介绍

  • 开发环境搭建

  • 模块与包管理工具

  • CommonJS模块

  • URL网址解析

  • QueryString参数处理

  • HTTP模块

  • HTTP小爬虫

  • request方法

  • 事件 events模块

  • 文件 fs模块

  • Stream 流模块

  • 原生路由与参数接收

  • 读取图片文件

  • npm scripts

  • Yarn 与 PM2

二、MongoDB

-MongoDB介绍与环境搭建

-数据库常用命令

-Collection聚集集合

-document文档操作

-聚集集合查询

-NodeJS连接MongoDB

三、GraphGL

  • GraphQL初探:从REST到GraphQL

  • GraphGL安装

  • 准备数据源

  • 搭建GraphQL服务器

  • 数据查询

四、Express

  • express 介绍

  • 安装和创建基于Express的项目

  • Express 4.1x 初始化项目详解

  • 路由简介

  • 模板引擎EJS

  • 模板引擎Pug（Jade）

五、Koa

  • Koa入门

  • Koa应用

  • 中间件

  • Context

  • async await

  • 请求与响应

六、测试框架mocha

  • 搭建框架

  • 断言assert

  • 项目测试

  • 运行多个测试

七、socket 即时通信项目

  • Socket简介和通讯流程

  • 基于net模块实现socket

  • WebSocket

  • Socket.io

项目十九、Node.js高级全栈项目

  • 基于Vue+Node+MongoDB+微信的高级全栈项目开发

大数据可视化

第七阶段：大数据可视化

项目二十、大数据可视化化基础与实战

一、数据可视化入门

  • 数据可视化基础

  • 零编程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau

二、D3.js详解

  • D3.js 入门

  • D3.js 进阶

  • D3.js 选择集与数据

  • D3.js 高级应用

  • D3.js 应用工具：NVD3、n3

-charts

三、其他JS库

  • Highcharts

  • FusionCharts

  • Polymaps

四、项目实战

总结：可以简单的说大前端包括一切负责展示的端，包括 Web 前端、PC、移动、大数据和 VR。但不管是“大前端”，或者是“小前端”，最重要的都是根据公司、项目的情况，更合理的划分职责。web前端学习群606721798