前端学习路线一览

准备工具：vscode(轻量软件，推荐入门使用) Webstorm（较吃内存，卡，推荐项目使用） Sublime(没用过，嘿嘿！！)

前提准备：学习git,学会代码上交github
https://mp.weixin.qq.com/s/Bf7uVhGiu47uOELjmC5uXQ

1. HTML 超文本标记语言（Hyper Text Markup Language），能够帮助我们在网页中书写内容。
   ----目标：大致掌握经常使用的标签（多去网页按f12查看），记住常用的head配置，理解HTML书写标准,记住主要常用标签 — div img a p span i h1 h2 h3 h4 h5 h6 ui li table tr td input button body em
   ----学习时长：7天
   推荐视频：https://www.bilibili.com/video/BV14J4114768

2. CSS 层叠样式表 (Cascading Style Sheets) 它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。能够丰富页面，丰富的文档样式外观，以及设置文本和背景属性的能力，增加网页的展示能力。
   -----目标：记住常用的属性（背单词），能够结合HTML做出简洁的的网页。
   ----学习时长：10天
   推荐视频：https://www.bilibili.com/video/BV14J4114768 (同上)
   推荐网站：https://www.sojson.com/web/panel.html — 配色网站
   https://www.iconfont.cn/ — 阿里巴巴图标库，以后找ui上这里找

3. HTML5 CSS3—最新的前端页面技术，需要掌握新的html标签 video audio canvas（这个简单学习），然后是BootStrap开源工具包–教你一步快速构建网页！
   ----目标：学会使用音视频标签，学会css动画和3d效果，简单掌握BootStrap基础用法（会玩就行），养成使用官方文档的习惯
   ----学习时长：7天
   推荐视频：https://www.bilibili.com/video/BV14J4114768 (同上)
   推荐网站：https://v3.bootcss.com/ — BootStrap中文网

4. JAVASCRIPT: 脚本语言，解释语言，临时编译，能够实现页面与用户的交互，实现信息的提交与后端的接轨。
   推荐网址：https://www.bilibili.com/video/BV1ux411d75J — js基础
   https://www.bilibili.com/video/BV1k4411w7sV — js DOM BOM
   建议上面两个视频一起观看

https://www.bilibili.com/video/BV1pt411H7D6/ — Jquery

https://www.bilibili.com/video/BV1xW411x7sw — ES6

http://www.axios-js.com/ — axios官网

https://developer.mozilla.org/zh-CN/ — MDN官网，这里有所有的JS知识，平时百度js问题时可以上这里看看。

I：编程语言基础知识点 （） ---- 全面掌握
----目标：知道JS数据类型 函数 判断 for循环等基础逻辑方法的使用以及对JS的对象，数组，函数有了解（常用数组方法，切数组，截取数组方法，为对象添加数据方法，修改对象方法，理解浅拷贝和深拷贝，理解通过遍历树比较对象的方法(数据结构的树这一节知识点)）…
----时长：（20天）
II：JS DOM(文档对象模型) BOM(浏览器对象模型) 实现与页面元素的正式交互，----简单掌握（7天）
目标：理解DOM树，学会使用js指令获取页面元素，了解常用的window对象中的属性和方法，理解js中的事件，知道如何与用户交互，初步理解用户体验的重要性。

III：----到这里建议去找一些你认为OK的网页或网页的一部分去临摹，找感觉，搭得多了，就老油条起来了

IV：Jquery:这是一个JS的库，比原生的JS写起来要来得方便，建议简单了解，记住核心方法比如选择器，常用的API，收发请求的方法等。（这玩意比较老套了，个人感觉没有深入学习的必要）
----简单掌握（5天）
V: 理解什么是JSON （半天）
VI：AJAX，和后端接轨的第一步，掌握原理即可----（需要接口可以问我要，我可以写一些简易的后端小服务器）
----目标：掌握如何向后端发送请求(不要使用form表单发送，这个过时了)，并尝试使用axios来简化你的请求代码。
----时长：（3天）
VII: 理解异步函数与同步函数-------（5天）
目标：理解回调函数原理，掌握ES6 Promise 和ES7 Async await 和 生成器(Generator)
VIII：ES6 最新的js技术，包含语法糖能更加方便你书写业务逻辑 (ES7 ES8 ES9 ES2020学有余力的可以康康)
----目标：掌握新变量名 let const 箭头函数， 数组新方法， 对象新方法， 模板字符串， 新数据类型Symbol Map Set ，Class语法…
----时长 20天
IX：js原型链----学有余力的同学建议看看。(这一块我都妹彻底吃透)

5. 框架学习之 VUE全家桶 ---- 这里建议看网课 （时长：30天）
   I：消化概念，熟悉框架
   II: 基本使用方法—书写规范，v-if v-show条件渲染 ,模板字符串，数据绑定，ref方法调用DOM，面向消息(添加事件)，过滤器，watch监听数据(简单监听和深度监听)，v-for循环批量渲染，发送请求，:style :class 修改样式
   III：了解VUE组件（包括组件传值，共享方法等），路由(修改路由，获取路由，在路由添加参数)，生命周期(理解官网生命周期那张图)，vue动画
   IV：VUEX全局管理工具(state mutation action getter ）
   推荐视频：https://www.bilibili.com/video/BV1m741137Q5 — vue

友情链接：https://cn.vuejs.org/ — 国人开发的框架，文档相对会友好一些和好理解一些

6. vue+js 开始正式接轨项目 – 使用vue-cli来快速打包 — 建议网课（15天）实战视频自己找，网站实战视频非常多，挑一个自己喜欢的写就可以了
   I：了解NPM的使用方法，包括装包（npm i），卸载包（npm uninstall），跑项目（npm run xxx），分清楚工具包(dependence)和开发依赖包（devDependence）的区别，了解打包的基本原理
   II：了解一些常用的工具包以及其使用方法 SCSS LESS axios element-ui …
   III: 理解vue-cli项目结构，熟练运用，理解 .vue文件的使用 ,能够写出数个有逻辑有业务的页面（建议学习完下面的node之后再写）
   友情链接：https://element.eleme.cn/#/zh-CN — element-ui官网
   https://less.bootcss.com/ — less官网
   http://www.axios-js.com/ — axios官网

7. nodejs的学习 ---- 算是一个后端编程—建议网课(25天)
   I: 理解js在node端与浏览器端的不同
   II: 学习基础语法，学会编写路由，学会i/o读写文件
   III：掌握框架 express 或 koa
   IV: 接轨数据库，掌握mysql或mongodb的基础语法，以及nodejs调用数据库的过程
   V: 处理前端的各种请求，包括对各种类型文件的请求(图片视频文件…)，理解多线程。
   VI：websocket实时连接，理解计网的握手机制

友情链接：http://nodejs.cn/ — nodejs官网
推荐视频：https://www.bilibili.com/video/BV1Ns411N7HU

8. 学习webpack正式开始理解前端项目打包的原理(25天)
   I：webpack5个核心概念 Entry Output Loader Plugin Mode，记住常用的依赖包
   II：配置devServer提高开发效率
   III:深化用户体验，学会 提高性能，缓存，预处理，懒加载，PMA,多进程打包…
   推荐视频：https://www.bilibili.com/video/BV1e7411j7T5

9. 最受欢迎的框架 React
   I:理解React核心概念，虚拟DOM，理解树结构（建议学习数据结构）
   II：利用webpack的知识自己手撸一个简单的React项目，理解React的基本机制
   III：开始使用jsx文件简化项目
   IV：理解ES6的class，对象继承，组件，组件传值，生命周期，路由，数据请求
   V：React一些脚手架的使用— create-react-app next.js create-next-app
   VI:React Native的使用-----------
   VII：使用react编写小程序
   推荐视频：https://www.bilibili.com/video/BV11t411S7iG
   https://www.bilibili.com/video/BV1Et41137Sb

10. Js的超集，TypeScript