现代前端开发流程 | 青训营笔记

孤独而灿烂的神
482 阅读7分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天

这是一个最好的时代，也是最坏的时代，我们亲身经历着激动人心的变革，也往往会陷入选择的迷茫。随着浏览器版本的革新与硬件性能的提升，Web 前端开发进入了高歌猛进，日新月异的时代，无数的前端开发框架、技术体系争妍斗艳，让开发者们陷入困惑，乃至于无所适从。特别是随着现代 Web 前端框架（Angular、React、Vue.js）的出现，JavaScript、CSS、HTML 等语言特性的提升，工程化、跨平台、大前端等理论概念的提出，Web 前端开发的技术栈、社区也是不断丰富完善。

任何一个编程生态都会经历三个阶段，首先是原始时期，由于需要在语言与基础的 API 上进行扩充，这个阶段会催生大量的辅助工具。第二个阶段，随着做的东西的复杂化，需要更多的组织，会引入大量的设计模式啊，架构模式的概念，这个阶段会催生大量的框架。第三个阶段，随着需求的进一步复杂与团队的扩充，就进入了工程化的阶段，各类分层 MVC，MVP，MVVM 之类，可视化开发，自动化测试，团队协同系统；这个阶段会出现大量的小而美的库。

项目研发流程规范

  • 比较适合大一点的公司和团队，需求，UI，测试，产品经理和开发独立；
  • 采用前后端分离, 前端采用前端开发框架提供页面，后端提供数据接口等；
  • 有完善的CI&CD环境；
  • 完善的代码分支，权限控制和分配；
  • Scrum敏捷开发，每个Sprint为2-4周，周期根据User Story量进行调整；
  • 这个研发流程中最好再加入不同的部门及角色负责相应流程的标注；以及各个阶段，各个角色所需要有的产出；

开发流程

（〇）流程概述

  • 领导或甲方提出需求，评审需求；
  • 根据需求画出原型图，评审原型图；
  • 技术实现评审，进行排期，开始开发；
  • 技术选型；
  • 项目架构搭建；
  • 根据原型图出效果图，评审效果图；
  • 前端根据效果图绘制静态页面；
  • 与后端对接接口；
  • 本地自测；
  • 发布测试环境，提测；
  • bug反馈，反复修改与修正；
  • 部署上线；

（一） 立项

领导或甲方提出需求，评审需求；

产出：立项申请书

（二）需求确认

根据需求画出原型图，评审原型图；

产出：原型图，功能清单，需求说明书

（三）工程排期

根据系统功能，复杂度等因素进行排期，安排出各项需求的时间节点

产出：排期表

（四）技术选型

根据需求进行合适的技术选型，本部分主要使用Vue作为开发主要框架，具体主要分为以下几种

    1. Vue原生
      开发门户网站，个性化定制要求比较高，兼容性要求比较高，使用Vue原生功能开发
    1. Vue + 第三方组件库
      开发后台管理系统，兼容性以及页面显示要求不高，可使用第三方组件库，加快开发，常用的第三方组件库有element-ui（PC端常用），vant-ui（手机端常用）
    1. uni-app
      开发小程序，使用uni-app
    1. vue-garr
      开发多tab系统，各个子系统之间关系较为分离，适宜选择微服务的方式
    1. next
      开发服务端渲染项目，使用next项目作为基础架构
      注： 同时确定的还有后端技术，数据库，代码托管平台，服务器，提测系统等等。

产出：技术方案文档

（五）项目整体架构

设计项目整体架构，项目的整体架构设计主要参考vue-element-admin的架构设计，不同项目可能会有不同的架构。

分割线

六、七、八为普通业务开发流程，此阶段开发过程开始进入项目细节，通常以多个小需求的模式进行增量开发，每当进入此阶段时，通常需要前端、后端、产品、美工再次开会进行需求的细节讨论，以确定需求的具体细节，可行则执行，不可行则修改或丢弃。前端分有些许不同，有的做基础服务，而有的做系统业务，分工不同会导致开发流程的差异，以下为开发系统业务的流程。

产出：效果图、周报、说明文档、接口文档

（六）根据原型图出效果图

UI根据原型图，设计出效果图，此效果图为前端开发的参考，正常情况下前端同学应当1:1还原美工设计图。

（七） 绘制静态页面

前端根据效果图绘制出静态页面，包括布局，颜色，大小，各种操作的显示效果等等，如需要数据的地方，可以先将数据写死在data中，或者mock数据，个人推荐前一种。

（八）前端端联调

页面编写完成后，需要与后端进行接口对接，通常后端会提供接口文档，顺利的话不需要进行协调，如果出现接口使用方式不明、接口报错等问题的出现，可以结合http状态码与后端进行联调。

（九）自测

前端开发完成之后，需要进行自测，或许不专业，但也尽量避免低级错误的发生，如边界问题等等。

（十）提测

自测完成之后，将代码发布到测试环境，然后在提测平台上发起申请进行提测。

（十一）bug反馈

提测后可能依旧会存在一些问题，如bug依旧存在或者需求有变更的情况，需要驳回，前端修复完成之后再次提测，此过程可能反复多次，知道不在有bug为止。

（十二）部署上线

部署正式环境，开放服务给用户。此过程也可细分为灰度上线与正式上线两部分，灰度上线即让一部分用户使用体验，提供反馈，根据用户进行修复与优化。

1676518638053.png

Vue框架的开发流程介绍

当我们从github上下载一个前端模板框架到本地后，框架中经常会自带有一些跳转显示类的功能，我们可以通过查看这些功能是如何实现的，进而一步步改造为我们需要的样子。在这一开发过程中，主要有4个重要的具体操作，下面依次介绍这4个具体的步骤：

1676518959013.png

步骤1：添加路由规则

  • 在页面的左边菜单栏，我们点击不同的选项卡，在浏览器的输入框就会自带跳转出不同的url，这一过程就称作"路由"(你当然可以简单的将"路由"理解为是"选路")。

  • 这些路由规则需要在router/index.js 中编写。
    在入口文件main.js中，导入了router文件，当我们需要为项目编写路由规则时，就需要在router/index.js 中编写。

步骤2：添加要跳转的路径

在添加路由规则时，通过component属性可以设置要跳转的路径，并且需要在对应的路径上创建对应的文件。

步骤3：定义接口路径

  • 在页面中引入了api下的js文件，该文件中定义了接口路径的一部分。
  • 接口路径的另一部分是 config/dev.env.js 中的BASE_API属性，BASE_API与url共同构成了项目页面的访问路径。

步骤4：使用axios进行接口调用

设置好路由规则、要跳转的路径、接口路径之后，我们就需要使用axios进行接口调用，具体是在页面引入JS文件，使用axios进行接口调用，把接口返回数据在页面显示。

avatar
文章
阅读
粉丝