Please enable JavaScript.
Coggle requires JavaScript to display documents.
如何零基础自学Web前端开发 (一、入门阶段 (第一学期：Web开发那些事儿 (训练JavaScript编程技能…
如何零基础自学Web前端开发
一、入门阶段
第一学期：Web开发那些事儿
了解Web开发概貌
了解Internet的工作原理
学习一些计算机网络的基础知识
计算机网络、互联网、Web
IP地址与端口
DNS
URI、URL
了解Web Server的职责与基本使用方法
Web Server是干什么的？现在有哪些Web Server？
Web Server监听80端口，这句话是什么意思？
Web Server是如何管理各种Web资源的？
了解相对路径与绝对路径的区别
区分静态资源与动态生成的资源
CDN是干什么用的？
了解浏览器的工作原理
浏览器与Web Server之间是如何交换信息的？
信息交换的格式：JSON
什么叫网络协议？有哪些常用的网络协议？
TCP/IP是什么东西？有什么用？
系统学习与了解HTTP协议
HTTP的Response和Request
method
状态码
HTTP消息的内部结构：Header与Body
MIME与ContentType
学会使用Chrome开发者工具查询HTTP消息内容
与后继内容并行学习
了解Web开发技术
了解互联网的发展历程
了解Web开发技术的历史演进
了解当前Web前端技术栈
安装与配置相关软件
1 IIS
安装
创建网站
启动和停止网站
在局域网环境下访问IIS网站
2 chrome
开发者工具的使用
3 node.js
安装Node.js本身
学习用新版本，开发用老版本
可以安装nvm来在同一台计算机上安装多个node.js版本，并进行方便地切换
安装一些非常重要的Node.js模块
nodemon
4 git for windows
Clone源码
Commit源码
5 Visual Studio Code
如何设置字体
文件管理
如何创建文件与文件夹？
如何打开资源管理器？
如何导入己有的文件？
Ctrl+S保存文件。
使用集成终端
在终端窗口中直接调用node运行.js文件
提前结束程序：ctrl+c
创建多个终端
如何调试程序？
Debug Console
掌握HTML 5与CSS3
HTML基础
HTML的基础知识
了解常用的HTML元素与属性
如何引用外部资源？
网页的结构与DOM树
表单与输入控件
CSS3精要
了解CSS的基础知识
版本
CSS的编程语言化
浏览器的兼容性问题
CSS命名规范-BEM
主流的CSS方案
学会编写CSS样式规则
选择器与优先级
CSS样式的继承与层叠原则
网页设计基础
盒子模型
内联元素与块元素
定位与浮动
BFC、IFC、GFC和FFC
响应式设计
flexbox响应式布局
媒体查询
material Design
掌握Web网页的常见布局实现方法
训练JavaScript编程技能
了解JavaScript的基础知识
历史、版本、发展方向、应用领域……
Babel
TypeScript
JavaScript的开发与运行环境
浏览器
Node.js
掌握JavaScript的基础语法与常用对象
变量、常量与数据类型
let、const和var
基础类型与引用类型
类型转换
null和undefined
变量的作用域
输入与输出
浏览器中使用document.write，console实现
运算符与表达式
ES6新增：展开运算符
优先级
流程控制
条件语句
循环语句
ES6新增：for-of循环
字符串操作
templateString
正则表达式
数组操作
定义
访问
插入与删除
排序
查找
解构赋值
settime，setinterval
函数
函数的定义与调用方法
命名函数与匿名函数
函数的返回值
函数的参数
函数作用域
嵌套定义的函数
递归调用
箭头函数
this关键字与call和apply方法
对象
对象的定义与使用方法
定义空对象之后再添加成员
对象字面量
嵌套的对象定义
定义对象方法
对象的属性的遍历、添加与删除
对象作为函数参数
对象的复制：浅拷贝与深拷贝
对象工厂函数与构造函数、new关键字
类与继承
class关键字
extends关键字
属性的概念
ES6 对象方法简化定义
JSON
Json字符串与JavaScript对象之间的相互转换
Json的基本语法
JavaScript模块化规范
CommonJS
AMD
ES6模块化
闭包
函数执行上下文与this关键字
函数对象的call方法
函数对象的apply()方法
闭包与返回函数的函数
原型
原型（prototype）是什么？
通过原型构建对象
迭代器与生成器
JavaScript异步编程语法特性
同步与异步的概念
回调
什么是回调？怎样编写一个支持回调的函数？
回调地狱：多重嵌套的回调
Promise
async/await
使用JavaScript操控网页
了解浏览器的工作原理
BOM：与浏览器交互
DOM：与HTML文档交互
访问和操控DOM元素
响应事件
AJAX：与服务端交互
XMLHttpRequest
jQuery
Fetch API
Web前端应用开发
极为重要的技术基础
了解即可
经典前端开发框架
Bootstrap
安装与版本对比
样式库
网格系统
组件
jQuery
jQuery简介
操控DOM
发出AJAX请求
使用jQuery插件
期末考试：使用Bootstrap/jQuery开发一个小网站，部署到IIS上
与后继任务并行学习
按顺序学习
第二学期：掌握Node.js开发技术
Node.js基础开发技术
Node开发基础
node概述
V8引擎，C++与JS混合开发而成
了解Node编程的主要特性
异步执行
事件驱动
单线程
什么叫同构JavaScript？
学会使用Node
安装Node
node命令，学会使用Node交互式编程环境
知道怎样使用Node运行独立的js文件
学会使用NPM
怎样安装新软件包？
如何创建package.json？
怎样运行脚本？
Node.js项目
熟练掌握使用Visual Studio Code创建一个Node项目的方法
学会使用nodemon
了解Node.js项目构成
补充知识
有一个可选的yarn，功能与npm等价，可以选学
可以使用国内镜像来提升安装模块的速度：cnpm
学习JavaScript的模块化部分
Node组件化开发
掌握node.js核心模块的基本用法
依据自己需要，选学选用第三方模块
underscore
node-dev
jshint
httpster
commander.js
搭积木的游戏：学会基于模块构建Node.js应用
学JavaScript部分的异步编程部分
Node.js事件驱动编程模型：事件监听器与事件发射器
Node.js的文件操作
文件的同步与异步存取模式
流与管道
使用fs.Stats读取文件信息
文件夹操作
创建、删除文件夹
改名
查找文件
使用File System Watcher监控文件系统的变化
期中考试
找本《计算机网络》教程，学学TCP/IP协议相关的知识
试题一：Socket编程——实现TCP Server
了解一下Socket的概念与编程模型
搜集相关资源，学习Node.js所提供的net核心模块的用法
自己总结Node.js的Socket基本编程套路
学以致用：编写一个网络计算器
看《HTTP权威指南》，了解HTTP协议的具体细节
试题二：开发HTTP Server
搜索相关资源，学习Node.js所提供的相关核心模块的用法
fs
http
编写HTTP Server，使用浏览器发出请求，检测其工作是否正常
Web开发极简框架：Express
什么是Express?
Express与Node.js之间是什么关系？
Express的应用场景是什么？
Express生态系统简介
下一代Express——Koa
安装Express
使用Express中间件
中间件是什么东西？
数据如何在中间件之间传送？
怎样定义中间件？
如何组合多个中间件构建一个HTTP请求处理管线
单元测试一：使用express重构HTTP Server
学会构建Node.js Web应用路由系统
怎样响应get/post等HTTP请求？
路径参数怎样用？
如何从URL中提取查询字符串？
学会使用正则表达式匹配路由
学会使用静态资源中间件提供静态文件访问
怎样实现重定向？
不同的URL，转发给不同的中间件处理
构建RESTful Service
了解RESTful Service的基础知识
什么是REST？
怎样设计REST API？
掌握REST开发辅助工具的用法：Postman，Fiddler等，任选其一
学会使用Express实现RESTful Service
使用视图引擎
EJS
Pug
Handlebars
Mustache
……
任选一种即可
单元测试二：分析express-generator创建的“样板”项目
期末考试
构建实时Web应用——在线聊天室
急用现学
学习JavaScript中AJAX部分的知识
学习jQuery中AJAX部分的知识
学会使用jQuery访问Express开发出来的RESTful Service应用
自行收集资料，了解开发实时应用的基础知识
WebSocket是什么
Socket.io
编写小的Demo，进行实时应用的开发实践
在Node.js应用中使用WebSocket
Socket.io的使用方法
使用Socket.io实现聊天室的实时通讯功能，并将其封装为RESTful Service
使用Bootstrap/Server端视图引擎构建网站的UI界面，使用jQuery发出AJAX请求访问RESTful Service
部署
部署到Windows服务器上
将网站部署到Linux服务器上
使用VirtualBox安装Linux服务器，学习Linux的基础知识
将网站部署到Linux服务器上（直接运行Node.js，监听80端口）
测试程序是否工作正常
第三学期：数据存取技术学习要点
学习数据库的基础知识
什么是数据库？
有哪些数据库？如何分类的？各有哪些特点？
学习如何存取关系型数据库
学会编写SQL命令
使用MySQL存储数据
数据库的安装与配置
掌握Node.js存取MySQL的基本编程技巧
学习如何存取NoSQL数据库
使用MongoDB存储数据
MongoDB概述
SQL vs. NoSQL
MongoDB的优缺点
掌握MongoDB的基础知识
安装与配置方法
理解文档与集合的概念
……
使用MongoDB Shell熟悉与掌握MongoDB
管理数据库
管理集合
CRUD基本操作
……
学会使用Robo 3T访问MongoDB
Node.js应用直连MongoDB
添加驱动
连接MongoDB
了解编程模型
数据库操作
集合操作
CRUD操作
Mongoose：简化MongoDB存取的数据框架
了解Mongoose
利用Mongoose连接数据库
定义模式
实现CRUD
使用Redis存储数据
期末考试
重构——在线聊天室的数据存储功能实现
使用己经掌握的知识自己开发一个小网站，使用数据库存储数据
第四学期：使用Vue开发前端应用
Vue技术精要
基础入门
Vue概述
Vue是什么
MVVM设计模式
Vue vs. jQuery
了解Vue的特色与优势
Vue的安装与使用
下载与使用方法
学习Vue的工具
Vue CLI：Command Line Interface
Vue的Chrome插件
Vue的实例
Vue实例中的基础成员及作用
methods
data
el：挂载点
template：模板
侦听属性
计算属性
this
Vue的生命周期
模板与数据绑定
设计Vue.js模板
基本实现思路
绑定显示文本
了解Vue常用指令的用法
{{ }}绑定和v-text绑定显示文本
v-html绑定HTML代码
v-bind绑定到HTML元素属性
v-once绑定
v-for与v-if混用
v-cloak
其他相关技术特性
数据绑定表达式
过滤器
显示特定类型的数据
数组操作与自动更新显示
显示对象属性
绑定到CSS
绑定到HTML元素的style属性
HTML元素绑定CSS样式类
如何动态切换显示HTML元素样式？
事件响应
v-on与事件的modifier
响应鼠标与键盘事件
自定义事件
表单绑定
组件开发
组件概述
组件的定义与注册方法
两种类型的组件
单文件组件
放在网页中的组件
组件的注册
网页中定义的组件
全局注册
局部注册
组件可以嵌套
了解组件定义需要遵循的一些原则
组件之间的数据通讯
父组件通过 props 向子组件传递数据
子组件通过事件向父级组件发送消息
父子组件之间的直接访问
$ref
$parent和$children
中央事件总线实现任何组件间的通讯
通过插槽（slot）分发内容
单slot
具名slot
组件高级用法
递归组件
内联模板
动态组件
异步组件
Webpack基础
概述
什么是构建？
什么是Webpack
webpack与grunt,gulp等有哪些区别？优缺点如何？
使用Vue-CLI创建项目框架
单文件组件
单元测试一：使用Vue重构在线聊天室应用的UI层
进阶与实践
访问Web Server：axios
路由系统：vue-router
使用路径参数实现动态路由
嵌套路由
路由之后提取数据
状态管理：vuex
自定义指令
Vue应用部署
使用Vue CLI编译打包
部署到Node.js web App中
单元测试二：将在线聊天室改造重构为“前后端分离”的Web应用
期末考试
用Vue写一个ToDoList应用
三、进阶阶段
“玩转Vue”
深入理解Web前端框架（Vue）运行机理
Virtual DOM与Render函数
异步更新DOM 的原理
状态管理的方式
全局状态
组件状态
路由
服务端渲染与同构应用
……
掌握系统性能调优方法
优化Node.js后端应用
了解Node.js的内部机理
掌握PM2的用法
了解浏览器渲染原理
Web前端性能优化策略与解决方案
Web前端工程化相关技术
前端工程化概述
了解和掌握各种前端工具
代码检查：ESLint
Browserify
Uglify
CSS
预处理：LESS
后处理：SCSS
样式代码检查：Stylelint
工作流管理工具
Grunt
Gulp
代码转换：Babel
脚手架工具：Yeoman
……
单元测试与TDD（测试驱动开发）方式
Java测试框架
Jasmine
Mocha
……
Mock与前后端连调
……
掌握团队协作开发项目所需的职业技能
使用Git管理项目
持续集成与自动化构建
……
系统学习Webpack
什么是Webpack？为什么它有“一统江湖”的势头？
理解Webpack的工作原理
chunk
loader
plugin
理解这三个核心概念极为重要
学会灵活配置Webpack
了解其插件系统，学会使用各种插件
掌握Webpack的定制与扩展技术
开发新插件
集成新工具
……
四、拓展阶段
在己有根据地基础上向外“蚕食”
对比学习其他的Web前端开发框架
学React
组件化开发
状态管理
Redux
路由
UI设计：Ant Design
……
学Angular
学习微信小程序开发
学习离线应用的开发技术——PWA
Push Notification
Offline Accessibility
Background Sync
Install on Home Screen
Access Device Camera
Get User Location
纵向拓展，学习Web后端开发技术
学习其他平台的Web后端技术
拓展：Docker与微服务
进入全新的领域（按需学习，长期投资）
开发桌面应用：Electron
开发手机应用：React Native
AR眼镜等智能设备应用开发：React 360
“混血的”Web应用：WebAssembly技术
……
二、实战阶段
实战选题
用node.js+Vue搭建一个百度网盘应用
克隆iconfont，一个极佳的用Vue构建UI层的项目
克隆知乎，写一个在线问答网站
写一个网上电子书店网站
...
开发你的第一个“传世之作”
1 需求分析
列出功能清单
明确网站用户类型，分配权限
2 UI设计
网站结构设计
确定网页间的链接（路由关系）
文件夹结构
网页可视化效果设计
资源与素材收集与制作
UI框架选型
3 架构设计
分层的系统架构
使用Vue开发的Web前端应用
使用Node.js+Express开发的后端应用
服务层
业务逻辑层
数据存储层
Client与Server之间的信息交换
确定要交换的数据包容哪些具体的数据项
Server端RESTful API设计
选择数据库，确定数据存储结构
选MongoDB还是MySQL？
数据库中具体包容哪些东西？
组件切分
前端Vue组件设计
外观样式
状态保存
交互特性
与人操作的交互
组件间的交互
与Server端的交互
后端Node模块
确定每个模块的职责与功能
确定模块之间的依赖关系
寻找可以复用的“轮子”
确定要自己开发模块清单
确定异常处理策略
4 项目框架搭建
使用Vue-cli搭建Web前端项目框架，并配置好开发环境
构建Node.js后端项目框架，并配置好开发环境
5 组件化开发
一个一个地开发前端组件
前端组件集成
将Vue组件装配为前端页面
实现前端组件之间的路由
一个一个地开发后端Node模块
6 准备发布项目
后端组件集成与功能测试
通过路由和中间件管线将Node模块组合起来
进行必要的测试
前端界面美化
实现动画与交互特性
调整样式表，使界面美观
7 部署
在本机上部署和测试
使用VirtualBox安装Linux虚拟机
在Linux虚拟机上安装Node.js与数据库（MongoDB或MySQL）
将开发好的前后端应用合并在一起，部署到Linux服务器上
部署到真实Web Server
在阿里云上购买Linux服务器
在Linux服务器上部署网站
遵循规范的Web开发流程