从0开始的前端学习路线

刚刚看到了一个up主分享的零基础前端路线，感觉深有体会且受到了启发，准备根据这个路线查漏补缺，记录分享一下～

一、HTML

div、label、span、b、p、ul、ol、li、dl、dt、dd、i、em、h1、h2、h3、input，掌握这些基本的标签。

---

二、CSS

1.语法：

1、. 操作符 ，使用class引用

2、#操作符，使用id引用

2.基本概念：

1、层叠式是什么意思？

2、CSS盒模型

3、CSS定位

4、CSS文档流的概念

5、CSS的四种定位

6、CSS优先级

3.实例：

各种购物网站（京东，淘宝）的静态页面（做一到两个即可）

---

三、JS

1.语法：

1、var创建变量

2、function，函数的基本使用

3、fun（xx），函数的调用和传参

4、this是什么

5、for循环

6、[ ]，{ }，数组和对象

7、for in 循环，键值对操作

8、document是什么

9、操作dom：creatElement，appendChild，innerHTML，setAttribute(n,m)

2.事件

onclick

3.实例：

1、轮播图

2、静态留言板

3、带了菜单的横向导航条，二维数组

这一阶段不用做太多原生JS的实例，目的是写熟练，不要出现拼写错误，理解基本开发的业务逻辑和需求分析。

---

四、Node.JS

1.nodeJs是什么？安装node成功

2.npm、node命令的基本使用

3.安装：vue-cli，保证成功并运行

至于其它的，事件、回调、buffer、stream、模块、路由、file、get/post、Express等等，先放一边。这一阶段要解决的，就是保证成功安装 VueJs。

---

五、Vue.JS

1.vue-cli，安装成功、并运行成功

2.vue模板语法，

{{msg}} ，之类的

3.vue常用指令：v-html，v-show，v-if，v-blind（：），v-onclick（@click），v-model，v-for

4.vue组件

5.vue路由

实例：

1、轮播图

2、静态留言板

3、带了菜单的横向导航条，二维数组

把之前用原生Js写过的例子，再用vue写一遍。因为之前写过，所以业务逻辑都是一样的。

目的是为了掌握与熟练使用vue，实现开发需求、并理清vue实现业务逻辑的思路

---

六、深入Node.JS

1.get、post请求

2.express 或 koa2，响应get请求

3.axios异步

4.目的是写自己的接口可以自己测试，响应get、post请求，变身为全栈开发

自学到这一步，相应的知识点、结构就已经有了。接下来要向纵深发展。

---

七、ES6

只做一件事，把上面的实例、demo，都有es6重新实现一遍。

目的是掌握es6的使用。

---

八、相关理论（进阶）

1.单例、工厂、观察者、OO等设计模式

2.http、tcp/ip协议

3.原型链、构造器、继承

4.模块化、公共、私有方法

5.数据结构、常用算法

6.浏览器渲染原理与机制

7. JavaScript性能与优化，移动端适配方案

8.html5、css3、前端工程化相关知识