# 配套前端

**Repository Path**: action_erlang/supporting-front-end

## Basic Information

- **Project Name**: 配套前端
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-15
- **Last Updated**: 2026-05-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 开发记录

## 一、项目搭建

- 使用vite的官方脚手架直接创建项目，vue3+typescript

- 修改eslint的规则

  - vue文件多单词命名强规则关闭
  - typescript的any类型不能使用关闭

- 完成自动路由的编辑，根据view的文件自动完成路由编辑

- 完成element-plus组件库的引入

- 完成登录静态页面的绘制

- 完成屏幕自适应

  - 安装插件postcss、postcss-pxtorem完成px自动转换rem

  - 创建postcss配置文件

    ```js
    // postcss.config.js
    export default {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 100,      // 关键：因为你的 html 基准是 100px
          propList: ['*'],     // 所有 CSS 属性都自动转 rem
          selectorBlackList: [], // 不转 rem 的选择器（这里不用管）
          minPixelValue: 2,    // 小于 2px 不转（避免细线模糊）
        },
      },
    };
    ```

  - 编辑主样式文件，main.less

    ```less
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      // 这里是按1200px为基准设置的
      font-size: 8.33vw;
    }
    
    @media screen and (min-width: 1200px) {
      html {
        // 这里会把625px转换成6.25rem
        // 这里的逻辑是 100px转换成1rem，1rem==16px
        // 所以6.25rem才等于100px
        font-size: 625px;
      }
    }
    
    ```

- 需要根据豆包提示，完成接口请求的封装

## 二、项目开发