技术选型
- 构建工具（gulp、grunt、webpack、fis、prepack、rollup(去除冗余代码，编译速度快)）
- gulp/grunt来做任务管理，不做编译
- grunt是先与gulp先面世的，对任务文件操作过程中的区别，gulp是流式的，他对文件的操作是输入输出类型,grunt操作一个文件是先读入再写入，下一个任务的任务的时候需要再读入再输出，不是流式操作，当项目很复杂的时候，grunt的I/O效率会很低，gulp是一次读入，之后的任何操作都是在内存中进行，因为I/O操作是很慢的
- 为什么要用构建工具：构建工具的作用：资源压缩（Js/css/图片）、静态资源替换（图片字体等的替换，减少http请求）、模块化处理、编译处理
- 构建工具（webpack/npm scripts(任务管理)）
- Babel:配置、安装、loader
- webpack: 配置、安装、plugun
- dev0server（热更新，页面渲染，服务）: 配置、安装
- MVVM框架选择
- 单向/双向绑定
- SSR
- 组件化
考虑的方面，开发的人员是纯前端还是后端，后端转前端的话选Angular,纯前端，并且团队中有新入行的，为了平衡这种学习成本去看生态（搭建体系、文档、作者对框架的维护的热度），对原理的了解程度能不能hold住，
选择Vue的原因：vue的流行程度和作者对vue的投入度远大于后Angular,react
- 模块化设计
- CSS模块化设计
- 设计原则
- 可复用能继承要完整
- 周期性迭代（根据当前需求设计模块。当有新需求的时候，重新思考先前的模块是否合理再改进）
优秀的代码是模仿出来
优秀的代码是设计出来
优秀的代码是重构出来的
- 设计方法
- 先整体后部分再颗粒化
布局：先确定布局，抽离布局模块，
页面：根据产品需求，划分多少个页面（如header/footer）;
功能：根据功能抽离模块（如btn）,
业务：继承功能，有个性化)
- 先抽象再具体
先抽象，可以通过配置显示以及样式转换
- JS模块化设计
- common.js (放公司的注册、登录，全公司通用)
- layout.js(某一个项目里面公用的布局)
- public.js(引入common.js和layout.js,然后页面模块引入public.js)
- util.js (提供辅助模块)
-JS组件设计（设计原则）
- 高内聚低耦合（尽量让组件的功能受控于组件本身，而不是依赖于其他组件，低耦合就是抽象公共代码，模块再继承然后覆盖自定义）
- 周期性迭代（根据业务的变化进行迭代）
-JS组件设计（设计方法）
- 先整体再颗粒化
- 尽可能的抽象
- 自适应方案设计(目标写一份代码适应所用屏幕分辨率)
- 通过构建工具使上线后的代码自动根据屏幕分辨率自动计算
- 基本概念
- CSS像素，设备像素、逻辑像素、设备像素比参考链接
- css像素就是px,逻辑像素就是css像素
- 设备像素就是物理像素，设备像素比就是css像素与设备像素的比例
- viewport。viewport分三类
- layout viewport：布局视口，就ios而言，移动设备浏览器的layout viewport一般默认设置为980px。
- visual viewport：视觉视口，即设备的像素分辨率，以iphone8为例，分辨率为750*1334像素。每个手机的像素分辨率不同，分辨率的 大小由硬件决定的
- ideal viewport：理想中的视口。理想视口与设备的宽度一致，iphone8的理想视口是375px。
- rem: 根据根元素
- 工作原理
- 利用viewport和设备像素比调整基准像素
- 利用px2rem自动转换css单位
- 代码维护及复用性设计的思考
- 需求变更（项目横向扩展能力，交互解耦合，耦合度低）
- 产品迭代（比如一个页面增加功能，删除功能的复杂度）
- Bug定位
- 新功能开发 （新功能开发的复杂度）
工程构建
上线指导
- html
- css
- javascript
SPA设计
- 设计意义
- a. 前后端分离
- b. 减轻服务器压力
- c. 增强用户体验
- d. Prerender预渲染优化SEO
- 工作原理
- a. History API (前进、后退、控制)
- onpopstate
- pushState
- b. Hash(前进、后退、控制)
- hashchange
- location.hash
生产构建
- 合并: style,javscript
- 抽取：将样式从JavaScript中抽取出来
- JS、CSS都要压缩
- 调试：开启sourceMap
面试相关
- 同学做过哪些项目啊....
- 为什么用这样的框架呢...
- 在项目中的角色是什么？解决过哪些难题..
- 通过项目学到了什么
面试演练
- 为什么选择Vue框架，
vue的特色是双向绑定
- Vue的双向绑定是如何实现的
双向绑定的设计模式，手动实现双向绑定
- 有没有使用过CSS module,基本原理是什么，Vue该如何做
- 开启CSS Module之后如何使用第三方样式库
- Vue的安装包有几个版本，遇到问题如何解决的（resolve...）
- 你的项目特色是什么，解决过什么问题，用了什么技术方案
- 为什么选择Webpack构建工具？dev-server的原理是什么？
dev-server的工作原理是利用web-socket去做的，dev-server插件会帮组在页面中自动注入一个js,看html的源文件会多出一个js文件，这个文件是dev-server这个插件自动注入进去的，他会起一个服务，它会起一个服务，那个js会跟这个服务建立连接，会建立文件监听，然后做文件刷新
- 项目是如何实现一个webpack的loader
- 如何做任务管理（npm script\gulp\grunt）
- 你的项目特色
- 解决什么问题，怎么解决的？用的什么技术方案
- 自适应问题，viewport.js怎么用webpack去打包，
- 先描述问题，再说特色
- 动态算font-size，背后的原理是rem，关于css中怎么根据一份设计稿写自适应；用px2rem把px转成rem，用一个loader把所有css中的px转成rem,rem再动态算font-size
- 对自己的项目是否满意？有改进空间吗？
聊压缩、vue异步加载(代码切割)
- 如果这个项目现在让你重新设计，你会怎么思考；
用什么技术，怎么做，好处是什么
- 自适应方案应该怎么做，原理是什么
- rem和em的区别
- 前后端分离是如何做的
前端做的路由，一个路由对应的是一个js，一个js中有很多组件，然后路由都在前端实现
- 前端的路由是什么原理
项目准备
- 梳理历史项目
- 打造一个较满意的项目
- 挑选难度最大的, 对自己最有挑战性的
- 开始用vue2技术栈去实现，主要思想，项目架构，方案实现
- 问答设计（逆向思维），针对性
- 更多思考 (源码思考)
项目该怎么介绍
- 项目背景：（一两句话），人力配置，什么样的时间点，项目场景
- 项目收益：人力成本：一个人干了三个人的活
- 项目设计：是否通盘考虑，这样设计的初衷是什么，后期扩展性强不强，业务复杂变化，项目是否支持横向扩展
- 项目总结：项目的不足，如何优化，应该用什么技术可以更好的实现，但是由于时间原因，所以暂时没有做，但后面时考虑优化方向
沟通技巧
- 强逻辑
- 要谦虚
- 知进退
- 善总结
课程总结
- 项目设
- 如何抽象设计组件
- 如何设计模块化？怎么组织模块之间的关系？
- 如何独立构建项目
- 如何上线
- 方案原理
- 最完美的自适应方案
- 路由的工作原理
- Vue的相关用法（最简单的方法做最复杂的事情达到最优的性能）
- 面试技巧
- 项目如何准备？
- 项目的深度思考
- 项目的面试问答演练
- 更多彩蛋
- 现在的项目是用的什么技术架构，有没有更好的方案？目前的开发效率是什么样的，有没有更好的方式提升开发效率？站点的产品质量如何，是否部署了监控体系？监控该使用什么样的技术方案？站点的性能如何，有没有提升的办法？等等，诸如此类，是不是知道该如何下手改造自己手里所谓的“简单”的项目？
- 只看效果，然后用自己最擅长的技术去实现这种效果、功能；第二步：反复思考，有没有更好的技术方案、这块要多学习、多对比，然后用想好的方案再次实现一遍，这个过程肯定会遇到不少问题，独立解决之。第三步：总结出两种方案的优点和缺点、遇到的问题以及如何解决的。这个就是你要在面试中呈现出来的东西。自己做过的理解才是最到位的也是最难忘的。
