面试超尴尬瞬间：我从没参与过一个全栈项目！

文章转载自http://www.qingmengtech.com/blogdetail?id=34

写简历是找工做的第一步，第二步就是面试，那么简历就是一块敲开面试大门的敲门砖，因此写简历的根本目的就是要体现出你的专业水平和项目经验，那么什么样的简历可以快速的抓住HR的眼球呢？做为前端工程师的简从来说，其中很重要的一点，就是要在简历当中至少有一个亮点的项目，这个项目既要凸显出你技术的深度和广度，又要与公司中的主流技术栈相吻合。那么接下来咱们就一块儿来分析一下目前公司的主流技术栈有哪些？咱们又应该如何运用这些技术栈打造一块“够硬”的敲门砖从而获得心仪的offer呢？

前端部分

随着时间和技术的发展，前端框架从jQuery一家独大的状况，发展到如今的Vue、React、Angular三足鼎立的状况，三个框架各有优略，也都是比较成熟，但从国内的前端使用现状来看，使用最多的两个框架是Vue、React，咱们再来对比一下Github上的Star数：

React的Star数

虽然star数不能表明一切，但由此也能够看出Vue受欢迎程度是很是高的。下面咱们着重介绍一下Vue.js的生态圈。

Vue

Vue.js是一款极简的MVVM框架，若是让我用一个词来形容它，就是“轻巧”。若是用一句话来描述它，它可以集众多优秀逐流的前端框架之大成，但同时保持简单易用。为何这么说，由于Vue.js经过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js却一直受到必定程度的关注，而其自己也在高速发展中，不管是生态、社区、资源、插件等等都在日趋壮大。

Vuex

若是说整个生态圈里Vue.js做为核心，坐实了老大地位的话，我会把Vuex放在老二的位置。学过React的人都知道Redux的重要性，而Vuex之于Vue就像Redux之于React。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。灵感来自Flux和Redux,但简化的概念和实现是一个专门为Vue.js应用设计的状态管理架构。若是您的应用程序足够简单，建议您不要使用Vuex。可是，若是您须要构建是一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。

言归正传，什么是状态管理模式？讲讲我本身的理解吧。当你在开发应用程序时，你必定会分解出不少组件进行开发，而各个组件之间想必在逻辑上多少是有关系的。那么组件之间的“通讯”就成了待解决问题。之前咱们试图用事件广播来作，但随之而来的问题是，在应用不断的扩展和变化中，事件变得愈来愈复杂，愈来愈不可预料，以致于愈来愈难调试，愈来愈难追踪错误。这固然不是咱们想要的，咱们但愿应用的各个部分都易维护、可扩展、好调试、能预测。因而，状态管理模式冒了出来。下图就是Vuex实现单向数据流的示意图：

Vue Router

Vue Router 是Vue.js官方的路由插件，它和Vue.js是深度集成的，适合用于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超连接来实现页面切换和跳转的。在Vue Router单页面应用中，则是路径之间的切换，也就是组件的切换。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的连接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

Vue CLI
做为Vue的脚手架，Vue CLI无疑是出色的。它能够帮你快速的上手Vue构建的工程，而无需再花多余的时间去熟悉Vue工程的文件系统。
使用它的方法也很简单：

安装Vue CLI3：

npm install -g @vue/cli

查看版本号：

vue –V

进入项目：

cd project-name

运行项目：

npm run serve

须要
注意的是：
若是你已经全局安装了旧版本的

vue-cli (1.x 或 2.x)，

须要先经过

npm uninstall vue-cli -g

或

yarn global remove vue-cli

卸载它
Vue CLI 须要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

Vant
有赞前端团队开发的一款轻量、可靠的移动端 Vue 组件库，60+高质量组件，95%单元测试覆盖率，完善的中英文文档和示例，支持按需引入，支持主题定制，支持国际化，支持 TS，支持 SSR。

# 经过 npm 安装
npm i vant -S

::: hljs-center

Webpack

Webpack并非Vue独有的东西,并且Webpack的大名说不定比Vue自己还响亮。Github上各大主流的项目，无一例外都已是基于webpack来开发。你能够不打算将其用在你的项目上，但没有理由不去掌握它。篇幅有限，不展开描述，一句话归纳webpack的主要用途：把全部浏览器端须要发布的资源作相应的准备，完成资源的合并和打包。四个核心概念：

入口(entry)：指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
输出(output)：告诉 webpack 在哪里输出它所建立的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
loader：让 webpack 可以去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能够将全部类型的文件转换为 webpack 可以处理的有效模块，而后你就能够利用 webpack 的打包能力，对它们进行处理。
插件(plugins)：能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。

后端部分

介绍完前端咱们须要掌握的技术栈，接下来要聊聊做为煊赫一时的全栈工程师来讲，还有哪些知识是须要咱们必须掌握的：

Node.js 给不少初学者的第一印象就是“能够在服务器上运行 JavaScript”，因而不少人就有这种疑问：“我写的是前端代码，又不是后端，我学Node.js干吗啊”。

现在的前端已经不是零几年的前端了，之前咱们写的是 Web Page，咱们写出来的页面是给人“看”的；而如今咱们写的是 Web App，咱们写出来的应用是给别人“用”的。而二者的复杂度也不可同日而语。

在服务器端，JavaScript不依赖浏览器，而是由特定的运行环境提供的JavaScript引擎解析执行，好比Node.js。服务器端的JavaScript不操做DOM和BOM，它经常用来作一些在客户端作不到的事情，例如操做数据库、操做文件等。另外，在客户端的Ajax操做只能发送请求，而接收请求和作出响应的操做就须要服务器端的JavaScript来完成。

因此哪怕你只想作一个前端er，Node.js也是一项必需要掌握的技能。

KOA2
MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构很是松散，是相似json的bson格式，所以能够存储比较复杂的数据类型。MongoDB最大的特色是它支持的查询语言很是强大，其语法有点相似于面向对象的查询语言，几乎能够实现相似关系数据库单表查询的绝大部分功能，并且还支持对数据创建索引。
咱们能够在Koa2中经过Mongoose对MongoDB进行便捷的对象模型操做。

总结

若是你的简历中有一个具有上述先后端技术栈而且可以上线的全栈项目的话，你还愁得不到面试机会吗？并且这种级别的项目在面试过程当中，当面试官问你关于项目经验的问题的时候，你也能够足够从容的来应对。

文末福利

给你们推荐一门包含上述全部技术栈的一个全栈项目，是由慕课网精英讲师--谢成老师讲授的。

双11活动只要1块钱哦~~（加后面的课程助手领取优惠券）下面小编奉上项目课程大纲：

课程地址

 

扫码加我好友
领取课程福利