devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

作为一个前端Leader，当你接到一个项目时，应该如何初始化您的项目_前端接项目

作者：Gausst松鼠会 | 2024-04-17 12:47:02

赞

踩

前端接项目

1、分析需求

拿到需求后，不是立马动工，我们需要先了解项目的业务需求和用户需求，并明确项目的范围，包括功能点、时间和预算等，来确定项目需求和范围。

2、技术栈选择

根据项目的需求和范围以及团队成员的技术栈，选择合适的前端技术栈，确定项目的结构和架构，例如 React、Vue、Angular 等，以及相关的开发工具（VScode）、框架（三大框架，路由管理、状态管理）和库（UI组件库）等。

3、配置开发环境

  1. 构建工具的选择（vite、webpack、gulp、Rollup等）；
  2. 包管理器的选择（npm、pnpm、yarn等）；
  3. 测试框架选择（jest、mocha等）；
  4. 代码格式化工具，ESlint等；
  5. 插件和扩展，为了代码一致性，安装适合您的编程语言和个人习惯的插件和扩展，例如 VSCode 插件、Chrome 扩展程序等。

4、设置开发规范和流程

建立前端开发规范和流程，包括代码风格、提交规范、代码审查、持续集成等，以确保项目的质量和可维护性。我们可以自定义ESlint的一些规则来满足我们的定制化需求。

5、确定测试策略

根据项目的需求和范围，确定测试策略和工具，包括单元测试、集成测试、端到端测试等。根据需要，进行覆盖率的设定，对一些公共组件/业务组件进行充分的测试。

6、部署方案和打包流程

根据项目的需求和范围，确定部署方案和流程，包括代码打包、静态资源托管、CDN 加速、自动化部署等。

  1. 确定部署目标：确定应用程序将部署到的目标环境，例如云服务器、容器、静态资源托管服务等。

  2. 静态资源打包：在生产环境中，为了提高应用程序的性能和速度，需要将静态资源（例如 JavaScript、CSS、图像等）打包成单个文件并压缩。通常使用构建工具（例如 Webpack）来完成这个任务。

  3. 代码打包：将应用程序的代码打包成单个文件，并将其压缩，以便在生产环境中使用。

  4. 自动化部署：使用自动化部署工具（例如 Jenkins、CircleCI、Travis CI 等）将应用程序自动部署到目标环境中。

  5. CDN 加速：使用 CDN（内容分发网络）加速应用程序的静态资源请求，以提高应用程序的性能和速度。

  6. 环境变量配置：为应用程序配置环境变量，以便在不同的环境下使用不同的配置。

  7. 监控和日志管理：在生产环境中，需要对应用程序进行监控和日志管理，以便及时发现和解决问题。

  8. 安全性和可扩展性：在部署方案中考虑安全性和可扩展性，例如使用 HTTPS 协议保护数据传输，使用容器技术实现应用程序的可扩展性等。

7、初始化项目

  1. 最简单的形式，我们可以使用脚手架的形式创建；
  2. 划分目录（i18n、utils、constants、hooks、api、stores、styles、view、components等）；
  3. 原子组件的封装（table组件、from表单组件等）；
  4. 根据业务判断是否需要进行业务组件的提取；
  5. 配置环境变量（.env等）；
  6. 编写README.md文件；

8、原子组件封装

  1. 例如table组件，可以封装后，进行配置化
    1. <template>
    2.   <div class="table">
    3.     <el-table
    4.       :data="tableData"
    5.       ref="table"
    6.       height="100%"
    7.       border
    8.       stripe
    9.       highlight-current-row
    10.       :header-cell-style="headerCellStyle"
    11.       @selection-change="handleSelectionChange"
    12.       row-key="id"
    13.       :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
    14.     >
    15.       <el-table-column type="selection" width="50" v-if="select" />
    16.       <el-table-column
    17.         v-for="(item, index) in column"
    18.         :key="index"
    19.         :label="$t(item.label)"
    20.         :min-width="item.width"
    21.         :show-overflow-tooltip="true"
    22.       >
    23.         <template #header>
    24.           {{ $t(item.label) }}
    25.           <el-popover
    26.             placement="top-start"
    27.             width="200"
    28.             trigger="hover">
    29.             <div v-html="item.tips"></div>
    30.             <i v-if="item.tips" slot="reference" class="el-icon-warning-outline"></i>
    31.           </el-popover>
    32.         </template>
    33.         <template slot-scope="scope">
    34.           <el-tag :type="item.statusColor[scope.row[item.prop] / 1]" v-if="item.status && scope.row[item.prop]">
    35.             {{ scope.row[item.prop] | statusDict(item.dict) }}
    36.           </el-tag>
    37.           <span v-else-if="!item.status && item.dict && scope.row[item.prop] !== null">{{ scope.row[item.prop] | statusDict(item.dict) }}</span>
    38.           <span
    39.             type="text"
    40.             v-else-if="item.link"
    41.             @keydown="() => handleLink(scope.row)"
    42.             @click="handleLink(scope.row)"
    43.             class="link-btn"
    44.             >{{ scope.row[item.prop] }}</span
    45.           >
    46.           <span v-else-if="item.date">{{ scope.row[item.prop] | formatDate }}</span>
    47.           <div class="defaultCol" v-else>
    48.             <span>{{ scope.row[item.prop] }}</span>
    49.             <el-button v-if="item.btn && scope.row[item.prop]" @click="copyClick(scope.row[item.prop])" class="btn" type="text">
    50.               <i :class="['icon', item.btn]"></i>
    51.             </el-button>
    52.           </div>
    53.           <el-tooltip :content="scope.row[item.explainKey]" placement="top">
    54.             <i class="el-icon-warning"  v-if="item.explain && scope.row[item.prop] == '2'"></i>
    55.           </el-tooltip>
    56.         </template>
    57.       </el-table-column>
    58.       <el-table-column
    59.         fixed="right"
    60.         :label="$t('operation')"
    61.         :width="tableOperateWidth"
    62.         v-if="tableButton.length > 0"
    63.       >
    64.         <template slot-scope="scope">
    65.           <div class="button-group">
    66.             <el-button
    67.               v-for="item in tableButton"
    68.               :key="item.id"
    69.               class="button-item"
    70.               :icon="item.icon"
    71.               :type="item.type"
    72.               @click="handleClick(item.value, scope.row)"
    73.             >
    74.               <span v-if="item.icon === ''" class="button-label">{{
    75.                 $t(item.label)
    76.               }}</span></el-button
    77.             >
    78.           </div>
    79.         </template>
    80.       </el-table-column>
    81.     </el-table>
    82.   </div>
    83. </template>
    84.  
    85. <script>
    86. export default {
    87.   props: {
    88.     tableData: {
    89.       type: Array,
    90.       default() {
    91.         return [];
    92.       },
    93.     },
    94.     column: {
    95.       type: Array,
    96.       default() {
    97.         return [];
    98.       },
    99.     },
    100.     tableButton: {
    101.       type: Array,
    102.       default() {
    103.         return [];
    104.       },
    105.     },
    106.     headerCellStyle: {
    107.       type: Object,
    108.       default() {
    109.         return {
    110.           backgroundColor: '#F4F4F6',
    111.         };
    112.       },
    113.     },
    114.     select: {
    115.       type: Boolean,
    116.       default: false,
    117.     },
    118.     tableOperateWidth: {
    119.       type: String,
    120.       default: '100',
    121.     },
    122.     minHeight: {
    123.       type: String,
    124.       default: '',
    125.     },
    126.   },
    127.   methods: {
    128.     handleClick(name, row) {
    129.       this.$emit('operate', name, row);
    130.     },
    131.     handleSelectionChange(val) {
    132.       this.$emit('selection-change', val);
    133.     },
    134.     handleLink(row) {
    135.       this.$emit('link', row);
    136.     },
    137.     copyClick(text) {
    138.       const el = document.createElement('input');
    139.       el.setAttribute('value', text);
    140.       document.body.appendChild(el);
    141.       el.select();
    142.       document.execCommand('copy');
    143.       document.body.removeChild(el);
    144.       this.$message({
    145.         type: 'success',
    146.         message: this.$t('copySucess'),
    147.       });
    148.     },
    149.   },
    150.   mounted() {
    151.     this.$nextTick(() => {
    152.       this.$refs.table.doLayout();
    153.     });
    154.   },
    155. };
    156. </script>
    157.  
    158. <style lang="less" scoped>
    159. .table {
    160.   width: calc(100% - 8px);
    161.   flex: 1 1 auto;
    162.   overflow: hidden;
    163.   .link-btn {
    164.     color: @primary;
    165.     cursor: pointer;
    166.   }
    167.   .defaultCol {
    168.     display: flex;
    169.     justify-content: space-between;
    170.     span {
    171.       overflow: hidden;
    172.       text-overflow: ellipsis;
    173.       white-space: inherit;
    174.       word-break: break-all;
    175.       width: calc(100% - 20px);
    176.     }
    177.     .btn {
    178.       padding: 0;
    179.     }
    180.     .icon {
    181.       color: @main-color;
    182.       cursor: pointer;
    183.     }
    184.   }
    185. }
    186. .button-group {
    187.   display: flex;
    188.   .button-item {
    189.     font-size: 18px;
    190.     padding: 0 5px;
    191.   }
    192.   .button-label {
    193.     font-size: 12px;
    194.   }
    195. }
    196. .el-icon-warning {
    197.   color: @warning;
    198.   margin-left: 5px;
    199. }
    200. .el-icon-warning-outline{
    201.   color: #9E9FA0;
    202. }
    203. </style>
  3. 例如from表单，可以使用components进行封装，进行配置化；
  4. 如果有图表类，为了色调、主题保持一致性，可以进行封装，传入配置参数即可。

9、业务组件提取原则

  1. 业务需求：首先要明确业务需求，了解组件在业务中的角色和功能。确保组件满足业务要求并能够解决特定问题。

  2. 组件复用性：考虑组件在当前业务中的复用性，以及是否具有潜在的复用价值。如果可能，设计组件时应尽量提高其通用性，使其可以在其他相关业务中复用。

  3. 业务边界：确定业务组件的边界和职责范围，避免组件过于庞大或功能不明确。保持组件的简洁性和单一职责原则，使其易于理解和维护。

  4. 数据传递：考虑组件之间的数据传递方式，确定最佳的数据流方向和数据交互方式。可以使用属性(props)、事件(emits)、上下文(context)等方式进行数据传递和通信。

  5. 可配置性：为业务组件提供适当的配置选项，使其能够适应不同的使用场景和需求变化。通过参数配置或插槽(slots)等方式，提供灵活性和可定制性。

  6. 错误处理：处理业务组件中可能出现的错误情况，提供良好的错误处理机制和用户提示，保证组件的稳定性和可靠性。

  7. 用户体验：关注用户体验，设计组件时考虑交互和界面的友好性，使用户能够轻松使用组件并获得良好的体验。

  8. 单元测试：为业务组件编写相应的单元测试，验证其功能和逻辑的正确性。确保组件在各种情况下的行为符合预期，减少潜在的错误和问题。

10、项目进度管控

  1. 制定明确的计划：在项目开始阶段，制定详细的项目计划，包括任务分解、工期估算、资源分配等。确保每个任务都有清晰的开始和结束时间，并考虑可能的风险和问题。

  2. 设置里程碑和关键节点：将项目划分为若干里程碑和关键节点，并设置明确的完成日期。里程碑和关键节点可以帮助团队跟踪项目进度并及时调整计划。

  3. 定期检查进度：定期检查项目的实际进度与计划进度之间的差距。可以使用项目管理工具或甘特图等方法进行可视化展示，以便更好地监控项目的进展情况。

  4. 风险管理：及时识别和评估项目中的潜在风险，并采取相应的措施进行应对和缓解。风险管理可以帮助减少项目延迟和进度偏差的发生。

  5. 资源管理：合理分配和管理项目所需的资源，包括人力资源、技术资源和物质资源等。确保团队有足够的资源支持项目的顺利进行。

  6. 沟通与协作：保持团队内部和与相关方之间的良好沟通与协作。及时共享项目进展、问题和挑战，并协调各方的合作，以便快速解决问题并推动项目进度。

  7. 及时调整计划：如果发现项目进度偏差或遇到意外情况，及时进行计划调整。根据实际情况重新评估工期、优化资源分配或重新安排任务顺序，以保持项目的整体进度。

  8. 监控关键指标：跟踪和监控关键指标，如工时消耗、任务完成率、工作量分配等。通过定期的数据分析和报告，可以及时发现问题并采取相应措施。

  9. 项目评估与复盘：在项目结束后进行评估和复盘，总结项目的经验教训，提炼出可借鉴的经验和方法，为以后的项目进度管控提供参考。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/440279
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号