‘壹’ 什么是前端工程化
所谓前端工程化我认为就是将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的。
工程化是一种思想而不是某种技术，前端工程化就是用做工程的思维看待和开发自己的项目，而不再是直接撸起袖子一个页面一个页面开写，所有能降低成本，并且能提高效率的事情的总称为工程化。
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。
前端工程师，又叫web前端开发，前端开发是从网页制作演变而来。早期的网页制作主要内容都是静态的，以文字图片为主，用户使用网站也以浏览为主。随着互联网的发展，现代网页更加美观，交互效果更加显着，功能更加强大，于是网站开发细分成了前端开发和后端开发。
前端工程师通过前端技术完成界面设计、界面展现，交互效果，页面维护、网站优化等等。通俗点讲，就是设计、制作网页，实现网页上各种各样的特效和功能。
‘贰’ 一个前端开发的工作流程是什么样的
我们以前基本的流程是，领导或甲方提出需求，然后产品分析需求，并且根据需求画出原型图，然后根据原型图出设计稿。
出完设计稿团队评审，过后交与前端制作静态页面，然后静态页面，交与设计审核，过后交给开发人员，进行动态数据的添加。
添加完之后，发布测试环境，产品测试领导审核，成功后，直接发布产品环境。或进行版本迭代。
这是整个的一个设计，开发，部署的流程。
根据前面的，在补充一下，前面的所有流程中的灵魂是原始需求提出者，但人随着客观条件的变化，思维认识会有所不一致，
所以产生了文档，文档是贯穿整个流程的一个灵魂。
而产品是整个流程中文档的编写者，因为产品最能接触最原始的需求，对需求的理解更深刻或专业，所以他会有一个文档出来。
这个文档是需要交付给设计，让设计在设计过程中进行参考。
前端看的另外一个文档。交互设计师出交互文档，一般的公司没有交互设计师那就是由产品来出的交互文档。
有的交互不过于复杂，就没有文档，只是邮件。
有时候说，不要这个邮件行不行，那怕是最简单的原始东西，没有文件或邮件是不能做一个后期测试回溯的依据。
产品文档表示页面的流转或数据的走向，交互文档描述页面复杂的交互或各个用户表单与用户发生的各种互动。
另外2个是，要架构师或项目经理出的需求文档，需求文档是对整个项目的历史背景，系统开发软硬件要求，或版本信息，等等。
另外一个是由服务端工程师提供的接口文档，这里边包括一些请求类型，传参的数目与键名，还有服务端返回的参数名约定等等的，这些文档是开发中的灵魂，也是以后测试回溯的标准或依据。
‘叁’ web前端的学习步骤是什么天津web前端培训
一、HTML的学习
HTML（超文本标记语言）是一个网页的骨架，不管是静态网页还是动态网页。之后返回到浏览器端的都是HTML代码。浏览器然后把HTML代码解释渲染后反馈给用户，所以，我们要掌握HTML的基本结构、常用标记和属性。
学习是一个记忆和理解的过程，在学习HTML过程中可以借助拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质， 将各种视图的优势发挥出来，这种对照学习的方法弥补了死记HTML标签和属性的枯燥。
二、css的学习
CSS叫做层叠样式表，一种样式设计语言，它能够做到网页表现与内容分离，与HTML相比它能复用HTML的样式，这样就在很大程度上提高了开发速度，也降低了维护成本。
同时CSS中的盒子模型、相对布局等能够实现对网页中各对象的位置排版进行像素级的控制。
三、javascript的学习
JavaScript是一种在客户端广泛使用的语言，它为我们提供了一些内置函数、对象和DOM操作，这些内容可以帮助我们来实现一些客户端的一些交互，如：效果、验证等，使界面更加生动。
四、jquery的学习
jQuery 能兼容各种浏览器，同时现在有很多基于jQuery的插件可供选择，这样在我们实现一些丰富的动态效果时更方便，大大节省了开发时间，提高了开发速度。
五、bootstrap的学习
Bootstrap是用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。在项目开发过程中，我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置，然后再有针对性的微调样式，这样基于框架进行开发大大缩短了开发周期。
前端就是后台实现和视觉表现的桥梁，是贯穿在整个产品开发过程的纽带，起到承上启下的作用，一个好的前端工程师他能够很好理解产品经理对用户体验的要求，也能够很好地理解后台工程师对数据逻辑，或者程序逻辑进行分离的要求，并将这些要求转化成前台的开发工作。
‘肆’ web前端项目经历怎么写
工作描述：
1、负责基于HTML、CSS、Javascript的Web前端开发；
2、负责基于HTML5、CSS3、Javascript的移动端前端开发；
3、与UI设计师积极合作，完成网页的前端页面实现；
4、与后端开发工程师积极合作，完成前端与后端的整合；
5、负责前端页面切图及专题模版制作，优化前端页面性能，能够解决浏览器兼容性问题；
6、研究和跟踪最新的前端技术发展，合理应用到项目中。
‘伍’ 前端项目的开发流程
前端开发流程概述
前端开发流程可分为需求分析、开发阶段、测试阶段、维护阶段，下面分别进行叙述。
2.1 需求分析
这个环节中，首先是和客户进行交流，了解客户的需求，然后分析项目的可行性，撰写项目需求文档。如果项目可行，则起讨论具体方案，分模块分步骤进行规划，分析项目进度安排、所需成本，进行原型设计（包括页面布局图，页面逻辑流程图，说明文档等。通过原型设计，可以让项目组和客户都可以对项目有一个直观感受，同时可以低成本高效率的复现业务场景和各模块流程）。
可以说需求分析阶段是整个前端项目的基础，基础不牢，地动山摇。可以试想，如果和客户沟通不顺畅，有的方面客户没搞清楚是什么效果，开发完成后就可能与客户发生纠纷；如果可行性有问题，有的模块很难实现或成本超出预算，就很难处理。
2.2 开发阶段
这个环节是前端工程师主要参与的部分，按照需求分析阶段的规划按步骤完成任务。
根据产品需求分析文档和原型图进行UI设计，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。
根据UI设计进行规划，提取界面中可以复用的模块方便重复利用，分析界面是否有实现难度比较困难的地方，进行沟通和功能排期，按功能大小以及难度进行功能时间的评估，和后端沟通好排期时间，保证大家能够更有效地开发合作，针对功能复杂的地方要先理清思路。
不要盲目开发前端搭建框架。根据设计图进行前端界面开发，以及遇到的问题及时与产品、UI、后台人员沟通，保持大家信息一致，针对不清楚的地方也要及时沟通，以免做错功能。
根据后端接口进行字段填充，以及部分功能开发。针对缺少的字段或者数据结构进行提出，及时与后端反应，尽量让大家都能以最小的改动完成后续开发工作。前后端都要按照规范进行开发，针对不规范的地方要给与提出、指正，营造出规范的工作模式，以后维护成本和沟通成本更低以及开发效率更高。如果前端的设计进度远远超前后端的接口和数据结构设计，也不必等后端，可以自行开发nodejs服务器配合postman等接口软件进行开发。
前后端功能联调、完成自测。检查功能完成情况，看是否有遗漏，出现问题及时沟通解决。
2.3 测试阶段
发布测试、修改bug、发布上线，自测完成后提交测试，测试根据提交的项目以及需求进行测试，提出bug给相关人员修改，开发人员周期性的配合修改bug，保证今天能够修复昨天的bug。
发布dev环境，配合测试，修复bug以及需求优化
发布test环境，修复bug以及需求优化
发布it环境，修复bug以及需求优化
发布pre环境，修复bug以及需求优化
pre验收之后，发布线上环境，产品进行验收
2.4 维护阶段
如果客户验收通过，项目就进入了维护阶段，程序的维护包括程序上线后后续bug的修复和程序版本的更新。
3 个人经验总结
3.1 文档很重要
前端项目的文档似乎已经作为前端工程化的标准流程之一了，文档写的好，可以便于同事快速了解你的代码功能和需求，便于协作。可以想象，随之项目复杂度增加，体量越来越庞大，开发团队人数也越来越多。这种情况下，如果像变魔术一样隐匿中间流程而直接得出结果，后果可想而知：项目复杂度越增加就越难以管理，开发效率低，合作混乱，结果甚至导致项目死亡。
好的文档看起来就像一个产品说明书，但作用却远远超过了说明书，不仅仅告诉你如何使用，还应该告诉你项目的设计思路，用了哪些组件，哪些部分不完善，将来有什么规划等等。这是一份比较好的说明文档。
3.2 与客户及时沟通很重要
3.3 扎实的基本功很重要
尽管当下框架、函数库、工具包等更新迭代非常快，前端工程师有很多新的知识要学，但原生JS、HTML和CSS依然是重要的基本功，在学习前沿工具的同时不能放弃基本功的训练。
‘陆’ 前端开发是做什么的工作职责有哪些
前端开发是做PC端开发任务;而Android开发、iOS开发和各种小程序主要针对的是移动端开发工作的。
1、使用Vue/React开发，配合产品完成 Web/Electron项目迭代；
2、收集、分析项目需求并给出技术解决方案，完成高质量的编码开发、调试和版本维护工作；
3、深入分析和解决前端遇到的各种技术、性能、跨终端兼容等问题，持续优化前端用户体验与框架；
4、协助前端开发工程体系建设与落地。
任职资格：
1、35周岁以下（含），211院校本科及以上学历，计算机相关专业优先，具备3年以上前端开发经验者优先；
2、掌握至少一种主流框架并深入了解其原理，熟悉前端研发生态圈，包括模块化、前端编译和构建工具；
3、熟悉主流浏览器的特点，对桌面跨平台有深入了解更佳；
4、有完整参与一个产品的设计、开发到上线过程，对前后端协作模式、产品和项目流程、网络和安全有深入理解，有大型项目前端架构部署和实践经验优先；
5、关注前沿技术，具备较强学习能力，在各大技术社区活跃者、有自己开源项目者优先；
6、具备良好服务意识、责任心以及团队沟通与协作能力。
‘柒’ WEB前端项目开发流程
这个环节是由项目经理完成，项目经理首先和客户进行交流，了解客户的需求，然后分析项目的可行性，如果项目可以被实现，项目经理写出项目需求文档交给设计师完成后续的开发。
这个环节主要是UI设计师参与，UI设计师根据产品需求分析文档，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。
这个部分由程序员来实现。（程序员分为WEB前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网页上看的见的页面，后台就做一些我们看不见的管理系统以及功能的实现。）程序员根据UI设计师的设计，用编码来完成整个项目的各个功能。
这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的bug，一般来说刚编码完成的程序都是存在问题的，就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行bug的修复。等到几乎所有bug修复完成，这个项目差不多就可以上线了。
程序的维护是整个项目的最后一个阶段，但也是耗时最多，成本最高最高的的一个阶段。程序的维护包括程序上线后后续bug的修复和程序版本的更新。
‘捌’ 前端项目开发<Vue>
说明： 在项目开发中，在一个js或css文件中如果导入其他目录下的相关文件，就需要通过如下方式,
示例：
但如果每次都导入同一目录下的文件，会比较麻烦，就可以通过设置简写路径达到同样的导入效果
配置方法如下，其中key值为自定义的简写名称（如stylePath），value值为配置的路径
示例：
在需要跳转的元素外包裹一层 <router-link></router-link> ，使用 to 语法即可跳转到指定的页面中
实际上，HTML会将 router-link 渲染成 <a> 标签
这就会导致被 router-link 包裹的元素中的文字显示成 <a> 默认的蓝色样式，可通过如下方式解决：
使用tag将 router-link 标记为 li 标签，这样既保证了 ul 中的子元素为 li ，又保证了html在渲染的时候，不会讲 router-link 渲染为 a 标签
如果某一页面多次被访问，并且其中的数据基本保持不变，则可以使用页面缓存的技术：
注： 当页面被缓存后，生命周期钩子 mounted 方法则只会在第一次进入的时候，执行一次，就不会再执行了。但生命周期钩子方法 activated 方法会每次调用
但如果页面的数据根据传过来的参数来判定是否需要缓存和刷新数据，则可以通过生命周期的钩子 activated 来实现数据的刷新
如果通过 keep-alive 进行页面的缓存，会将其包裹下的路由子页面都会被缓存，假如其中的某一子页面不需要被缓存，则可以通过 exclude 语法将不需要缓存的页面隔离出去，保证其每次都会重新加载请求：
注：
当在一个页面拖动到底部的某个位置的时候，再点击其中的一个元素进入到下一个页面，则进入的这个页面也会被拖到相同的位置，这就造成了多页面的拖动影响
在路由配置中，加入一项 scrollBescrollBehavior ，即每次进行路由切换的时候，让页面的初始位置为指定的x和y值
前端项目通过webpage 启动的，它不支持IP的形式进行页面访问，所以需要修改项目的默认配置项
在项目的根目录下的package.json文件中，进行如下配置：
注： 主页增加了 --host 0.0.0.0
在某些浏览器和手机上不支持一些es6和vue的新特性，就会出现兼容性的问题
通过使用第三方框架库 babel-polyfill 来解决兼容性问题
参考文章： https://blog.csdn.net/crazyfeeling/article/details/70241285
说明：