（前端小白）从想从事前端开发岗到现在的一个月，我都做了些什么&&未来的打算

了解这个行业的需求和Job Description

从2020年考研成绩出来的那刻就明白，应该要着手准备工作了，你越想逃避的越在你害怕来临的时候到来。
由于之前在大学学过网页设计和ASP.net，用Dreamweaver和VSCode写过一些前端网页，但是那时候基本上是自己拉表单出来，很少涉及大量代码的规范，只知道一些基本的标签和元素，会写一些超链接，但是什么交互，什么优化，代码复用，后期维护是什么都不会的，只是水一些课程。曾经有一次真诚的学习机会放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。

行业需求

可以明确的是前端岗位还很缺人，缺的不是新人，而是能把底层原理玩的很明白的大牛，从尤雨溪开发的Vue框架就可看出，能看到最基础的人，才能玩转各种技术。这里附上尤大团队最近关于Vue.js开发的全英纪录片，优秀的人什么都是优秀的，连英语都说的这么好听呜呜呜
B站尤雨溪Vue.js纪录片(中英版)
虽然只有一个月的接触，但是却能感受到前端现在不仅仅是只会三大件(HTML+CSS+JavaSrcipt)就能找到一份还不错的工作了，还需要去熟练掌握各大前端框架（Vue/React/Angular）当然现在不是全部去学，我现在就只学Vue，但是一些国内外的大厂基本上用的都是React了。还有一些类库和前端工具以及版本管理比如Ajax,WEB Server,JQuery,BootStrap,NodeJS,Gulp,Webpack。
在我刚开始找工作的时候我很不以为然，觉得前端应该还挺好学的，发现去各大公司的职位描述上match时，那么多技术和项目经验都是我不够完善的，我比那些还没毕业就各种项目玩的飞起的人差的不是一星半点。我以前认为超级简单的简历制作都被身边人pass了不知道多少次，我不断修改和技术更新，现在终于可以不被一些公司一下子就pass了。现在就只差我的JS和Vue框架进阶了,yeah!!!fighting!

工作描述（Job Description）

一个月的时间，我投了近10家特别想去的公司，也海投了几十家不知名的小众公司，看了很多的工作描述才让我更加了解自己接下来要学习的技术。不得不说，看清楚工作描述还是很重要的。
随便找了一家自己投过的公司，其要求是：
本科以上学历；
扎实的JavaScript基础，熟悉ES6，熟悉TypeScript优先；
熟练使用vue/vue-router/vuex,能基于vue封装自己的UI组件；
熟练掌握的CSS3特性，能够使用CSS3完成各种网页特效制作和样式表现；
对前端工程化与模块化开发有一定了解；
熟悉Webpack、Node.js等自动化构建工具；
有electron开发项目经验者优先；
有微信公众号和微信小程序开发经验者优先；
代码风格良好，遵守规范，对代码的整洁、优化、可读性有所追求；
责任心强，良好的对外沟通和团队协助能力，主动好学，有技术热情；

根据一个职位的相关职位描述再去优化对应的简历是很重要的，HR 也会对简历上项目经验、实习或工作经验去问一些相关的问题，快速的筛选人才。

这一个月我都做了什么

学习前端技术,拓展技能树

制定自己近期的规划

学习HTML和CSS

学习HTML需要了解的一些知识点

1. HTML 语义化( 不是很理解为什么面试总会问 )
2. canvas
3. 本地存储（ localStorage、sessionStorage、cookie 的理解 ）
4. video 和 audio 的使用
5. 应用缓存( cache manifest )
   不只是div一把梭

学习CSS要了解的知识点

• 盒模型（标准 & IE ）
• flex、float、Normal Flow 等的理解
• CSS 常用选择器
• 行内、内部、外部样式的区别
• CSS 层叠规则
• BFC 与 IFC 的了解
• CSS3 的 transform、transition、animation 等属性的运用了解
• 响应式布局的理解

学习JavaScript以及JavaScript（ES6）

• 闭包
• 原型链
• 作用域链
• 继承
• 类型转换
• this
• 作用域(ES6)
• 原型链以及继承(ES6)
• 动态作用域和词法作用域
• JavaScript执行机制
• promise&async

CSS & HTML & JavaScript 推荐书籍/网站

W3C 的 CSS&HTML 网络教程
《CSS 权威指南》
《CSS 揭秘》
《JavaScript 高级程序设计》
《你不知道的 JavaScript》上卷
ECMAScript 6 入门

学习Vue全家桶

如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。

至于 React 和 Vue 该学习哪一个，更多的还是看当下公司使用的是哪一个（也不是必然），一般大公司和国外的都是使用React。对于 Vue(React) 该如何使用其实不用多久就能上手，我们更应该关心的是他们背后的设计思想和实现原理。
一个公众号上了解的（侵权删）：
感兴趣的可以看看这篇文章：
React or Vue: Which Javascript UI Library Should You Be Using?

以下是提炼的文中观点：

Vue的优势是：

• 模板和渲染函数的弹性选择
• 简单的语法和项目配置
• 更快的渲染速度和更小的体积

React的优势是：

• 更适合大型应用和更好的可测试性
• 同时适用于 Web 端和原生 App
• 更大的生态系统，更多的支持和好用的工具

Vue基础

• Vue的基本使用
• Vue的指令系统
• Vue的双向数据绑定
• 局部组件的创建和使用
• props和$emit
• 通过事件向子组件发送消息
• 全局组件的使用
• 具名插槽
• 过滤器
• watch
• 计算属性
• 组件的生命周期

Vue Router

• 获取DOM元素
• 给DOM元素添加事件的特殊情况
• 前端路由
• Vue Router 的基本使用
• 命名路由
• 嵌套路由
• 动态路由分配
• keep-alive在路由中的使用
• meta的基本使用
• 并发请求
• config

Vuex的使用和上线前的优化

Vuex的核心

• state
• mutations
• getters
• actions
• modules

axios和Webpack的使用

axios是什么

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios的特点

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应 （就是有interceptor）
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

axios安装

使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Vue cli脚手架

2.x和3.x 都要先安装再去创建项目 有很多教程了

Vue 预渲染和SSR

服务端渲染的核心就在于：通过vue-server-renderer插件的renderToString()方法，将Vue实例转换为字符串插入到html文件。

我们使用服务端渲染是为了弥补单页面应用SEO能力不足的问题
因此，实际上我们第一次在浏览器地址栏输入url，并且得到返回页面之后，所有的操作仍然是单页面应用在控制。我们所做的服务端渲染，只是在平时返回的单页面应用html上增加了对应路由的页面信息，好让爬虫获取到而已**

明白了这一点，我就可以将项目一分为二，也就是分为服务端渲染和客户端渲染。服务端渲染就是项目一所做的，根据vue实例获取对应路由的seo信息，然后添加到返回的单页面应用html上；客户端渲染就是平时我们所熟悉的单页面应用，

Vue项目

目前还准备涉及，等再学两天就可以上手了！

积累面试经验和做好技术面的准备

收集了一些我自己觉得写的很好的前端面试经验和面试题目
另外自己这段时间的面试经验还没来得及整理。后续应该会更新
这里留给到时候的更新地址

1. 1.5万字概括ES6全部特性
2. 一杯茶的功夫，上手Node.js
3. Vue源码解析

接下来的学习任务

学习库工具和JavaScript基础+进阶

库工具

我们常用的有 JQuery、underScore、zepto、Moment 等

JQuery: 降低开发者操作 DOM 的复杂度
UnderScore: 提供实用的函数
Zepto: JQuery 的简化版
Moment: 日期和时间操作库
我们在学习库工具的时候，必定是需要回头看 JavaScript 基础的；这也就进一步夯实了基础。

JavaScript基础+进阶

浏览器工作原理

有博主说，刚开始工作头疼的是处理IE的兼容问题，所以了解浏览器工作原理是非常有用的。
通过了解浏览器工作原理，我们可以：

• 准确评估Web项目的可行性
• 更高维度审视页面
• 解决面试中遇到的绝大多数浏览器问题

计算机基础知识

• 页面渲染原理
• 浏览器安全问题
• 系统的优化页面
• TCP/IP三次和四次握手
• HTTP和HTTPS的区别
• 算法和数据结构（面试超级有用！！之前面的几个都是在这里栽了跟头）:推一本书《学习 JavaScript 数据结构与算法》（第三版）
• 模块化+组件化+规范化（git使用和工作流程，API接口使用）
• Node js:Nodejs 在应用程序中的作用
  Express 和 Koa 的区别
  Nodejs 的底层运行原理、和浏览器的异同
  Nodejs 非阻塞机制的实现原理

小结

总觉得自己还有很多很多没有学到的，但是一口是吃不下一个胖子的。就像20天前的我还简单的以为我不学JS,直接上手Vue全家桶就可以找到工作一样，但事实是JS才是最基础重要的，不要本末倒置，该学的怎么也逃不掉，就像之前逃避408，选择只考数据结构的研究生之路一样。 好吧，先这样咯，希望接下来的工作之路可以顺利点，拿到一个自己能够成长的offer！

部分引用：1.掘金 https://www.jianshu.com/p/065294e2711c
2.公众号：小生方勤