一、基本信息

组号：69

组员：李重昊

负责模块：工程化提效与模块化设计

二、核心任务

在本项目开发过程中，我主要负责推进前端工程化建设以及模块化设计实践，通过规划开发流程、提高代码复用率，提升整体开发效率与项目可维护性。

三、具体工作内容

1、工程化规范建设

工程化工具链配置：

  "scripts": {
    "dev": "vite",
    "pure-build": "vite build",
    "build": "run-p type-check \"build-only {@}\" --",
    "openapi2ts": "openapi2ts",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },

代码规范统一：

使用ESLint进行代码质量校验

import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfigWithVueTs(
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  pluginVue.configs['flat/essential'],
  vueTsConfigs.recommended,
  skipFormatting,
)

使用Prettier进行代码格式化

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

统一团队代码风格，减少风格差异带来的维护成本

开发工具优化

配置IDE自动格式化，提高编码效率

根据项目需求调整eslint.config.ts、.prettierrc等规则

2、接口请求自动化

使用了@umijs/openapi 工具

根据后端Swagger/OpenAPI文档自动生成：请求函数和TypeScript类型定义

// 根据后端接口生成前端请求和 TS 模型代码
export default {
  requestLibPath: "import request from '@/request'",
  schemaPath: 'http://localhost:8123/api/v3/api-docs',
  serversPath: './src',
}

生成产物：

// @ts-ignore
/* eslint-disable */
import request from '@/request'

/** 此处后端没有提供注释 POST /app/add */
export async function addApp(body: API.AppAddRequest, options?: { [key: string]: any }) {
  return request<API.BaseResponseLong>('/app/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    data: body,
    ...(options || {}),
  })
}

实现效果：

避免手写接口代码

减少接口字段错误

后端接口变更时一键重新生成

相比传统开发方式，可以大幅度降低重复劳动，提高开发效率与接口的一致性。

3、通用布局模块化设计

统一布局骨架：采用三段式布局：

<template>
  <a-layout class="basic-layout">
    <!-- 顶部导航栏 -->
    <GlobalHeader />
    <!-- 主要内容区域 -->
    <a-layout-content class="main-content">
      <router-view />
    </a-layout-content>
    <!-- 底部版权信息 -->
    <GlobalFooter />
  </a-layout>
</template>

<script setup lang="ts">
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalFooter from '@/components/GlobalFooter.vue'
</script>

优势：

页面无需重复编写布局代码

提高组件复用率

结构清晰，便于维护与扩展

收获与总结

通过本次工程化实践，我获得了以下提升：

• 掌握前端工程化工具链（ESLint、Prettier、OpenAPI）
• 理解模块化设计思想（高内聚、低耦合）
• 能够独立完成项目结构优化
• 提高了代码复用能力与开发效率