1、分析需求

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

2、技术栈选择

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

3、配置开发环境

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

4、设置开发规范和流程

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

5、确定测试策略

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

6、部署方案和打包流程

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

确定部署目标：确定应用程序将部署到的目标环境，例如云服务器、容器、静态资源托管服务等。
静态资源打包：在生产环境中，为了提高应用程序的性能和速度，需要将静态资源（例如 JavaScript、CSS、图像等）打包成单个文件并压缩。通常使用构建工具（例如 Webpack）来完成这个任务。
代码打包：将应用程序的代码打包成单个文件，并将其压缩，以便在生产环境中使用。
自动化部署：使用自动化部署工具（例如 Jenkins、CircleCI、Travis CI 等）将应用程序自动部署到目标环境中。
CDN 加速：使用 CDN（内容分发网络）加速应用程序的静态资源请求，以提高应用程序的性能和速度。
环境变量配置：为应用程序配置环境变量，以便在不同的环境下使用不同的配置。
监控和日志管理：在生产环境中，需要对应用程序进行监控和日志管理，以便及时发现和解决问题。
安全性和可扩展性：在部署方案中考虑安全性和可扩展性，例如使用 HTTPS 协议保护数据传输，使用容器技术实现应用程序的可扩展性等。

7、初始化项目

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

8、原子组件封装

例如table组件，可以封装后，进行配置化

<template>
  <div class="table">
    <el-table
      :data="tableData"
      ref="table"
      height="100%"
      border
      stripe
      highlight-current-row
      :header-cell-style="headerCellStyle"
      @selection-change="handleSelectionChange"
      row-key="id"
      :treeProps="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection" width="50" v-if="select" />
      <el-table-column
        v-for="(item, index) in column"
        :key="index"
        :label="$t(item.label)"
        :min-width="item.width"
        :show-overflow-tooltip="true"
      >
        <template #header>
          {{ $t(item.label) }}
          <el-popover
            placement="top-start"
            width="200"
            trigger="hover">
            <div v-html="item.tips"></div>
            <i v-if="item.tips" slot="reference" class="el-icon-warning-outline"></i>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-tag :type="item.statusColor[scope.row[item.prop] / 1]" v-if="item.status && scope.row[item.prop]">
            {{ scope.row[item.prop] | statusDict(item.dict) }}
          </el-tag>
          <span v-else-if="!item.status && item.dict && scope.row[item.prop] !== null">{{ scope.row[item.prop] | statusDict(item.dict) }}</span>
          <span
            type="text"
            v-else-if="item.link"
            @keydown="() => handleLink(scope.row)"
            @click="handleLink(scope.row)"
            class="link-btn"
            >{{ scope.row[item.prop] }}</span
          >
          <span v-else-if="item.date">{{ scope.row[item.prop] | formatDate }}</span>
          <div class="defaultCol" v-else>
            <span>{{ scope.row[item.prop] }}</span>
            <el-button v-if="item.btn && scope.row[item.prop]" @click="copyClick(scope.row[item.prop])" class="btn" type="text">
              <i :class="['icon', item.btn]"></i>
            </el-button>
          </div>
          <el-tooltip :content="scope.row[item.explainKey]" placement="top">
            <i class="el-icon-warning"  v-if="item.explain && scope.row[item.prop] == '2'"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('operation')"
        :width="tableOperateWidth"
        v-if="tableButton.length > 0"
      >
        <template slot-scope="scope">
          <div class="button-group">
            <el-button
              v-for="item in tableButton"
              :key="item.id"
              class="button-item"
              :icon="item.icon"
              :type="item.type"
              @click="handleClick(item.value, scope.row)"
            >
              <span v-if="item.icon === ''" class="button-label">{{
                $t(item.label)
              }}</span></el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    column: {
      type: Array,
      default() {
        return [];
      },
    },
    tableButton: {
      type: Array,
      default() {
        return [];
      },
    },
    headerCellStyle: {
      type: Object,
      default() {
        return {
          backgroundColor: '#F4F4F6',
        };
      },
    },
    select: {
      type: Boolean,
      default: false,
    },
    tableOperateWidth: {
      type: String,
      default: '100',
    },
    minHeight: {
      type: String,
      default: '',
    },
  },
  methods: {
    handleClick(name, row) {
      this.$emit('operate', name, row);
    },
    handleSelectionChange(val) {
      this.$emit('selection-change', val);
    },
    handleLink(row) {
      this.$emit('link', row);
    },
    copyClick(text) {
      const el = document.createElement('input');
      el.setAttribute('value', text);
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      this.$message({
        type: 'success',
        message: this.$t('copySucess'),
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout();
    });
  },
};
</script>

<style lang="less" scoped>
.table {
  width: calc(100% - 8px);
  flex: 1 1 auto;
  overflow: hidden;
  .link-btn {
    color: @primary;
    cursor: pointer;
  }
  .defaultCol {
    display: flex;
    justify-content: space-between;
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: inherit;
      word-break: break-all;
      width: calc(100% - 20px);
    }
    .btn {
      padding: 0;
    }
    .icon {
      color: @main-color;
      cursor: pointer;
    }
  }
}
.button-group {
  display: flex;
  .button-item {
    font-size: 18px;
    padding: 0 5px;
  }
  .button-label {
    font-size: 12px;
  }
}
.el-icon-warning {
  color: @warning;
  margin-left: 5px;
}
.el-icon-warning-outline{
  color: #9E9FA0;
}
</style>

例如from表单，可以使用components进行封装，进行配置化；
如果有图表类，为了色调、主题保持一致性，可以进行封装，传入配置参数即可。

9、业务组件提取原则

业务需求：首先要明确业务需求，了解组件在业务中的角色和功能。确保组件满足业务要求并能够解决特定问题。
组件复用性：考虑组件在当前业务中的复用性，以及是否具有潜在的复用价值。如果可能，设计组件时应尽量提高其通用性，使其可以在其他相关业务中复用。
业务边界：确定业务组件的边界和职责范围，避免组件过于庞大或功能不明确。保持组件的简洁性和单一职责原则，使其易于理解和维护。
数据传递：考虑组件之间的数据传递方式，确定最佳的数据流方向和数据交互方式。可以使用属性(props)、事件(emits)、上下文(context)等方式进行数据传递和通信。
可配置性：为业务组件提供适当的配置选项，使其能够适应不同的使用场景和需求变化。通过参数配置或插槽(slots)等方式，提供灵活性和可定制性。
错误处理：处理业务组件中可能出现的错误情况，提供良好的错误处理机制和用户提示，保证组件的稳定性和可靠性。
用户体验：关注用户体验，设计组件时考虑交互和界面的友好性，使用户能够轻松使用组件并获得良好的体验。
单元测试：为业务组件编写相应的单元测试，验证其功能和逻辑的正确性。确保组件在各种情况下的行为符合预期，减少潜在的错误和问题。