---
title: "21-前端万用项目模板介绍"
created: 2025-12-02
tags:
  - 项目
aliases:
  - 前端万用项目模板介绍
---
# 前端万用项目模板介绍

基于 React + Ant Design 的项目初始模板，整合了常用框架和主流业务的示例代码。

只需 1 分钟 即可完成网站的基础前端！！！大家还可以在此基础上快速开发自己的项目。

## 获取源码

源码下载百度网盘链接: <https://pan.baidu.com/s/12haXVFytMxtbrLr51Vopfw> 提取码:
h4pi

## 视频讲解

<https://www.code-nav.cn/essay/1805893369842937858>

## 文字讲解

见本教程的 **前端万用模板开发教程**

## 模板能力

1. 集成登录：

   ![[49fae948-c646-4f57-8749-865e9a560b63-ac265d1d.png]]

   快速开发管理功能（增删改查）：

   ![[43e140b9-a69c-4517-9ea4-d579ec504e28-8cd8d264.png]]

   ## 模板特点

   ### 主流框架 & 特性

   - Ant Design Pro 6.0.0
   - React 18.2.0
   - node 至少 16 版本及以上
   - antd 5.2.2
   - Type Script
   - 动态路由
   - Eslint
   - Prettier

   ### Ant Design Pro 架构

   #### Umi

   - Node.js 前端开发基础环境
   - webpack 前端必学必会的打包工具
   - react-router 路由库
   - proxy 反向代理工具
   - dva 轻量级的应用框架
   - fabric 严格但是不严苛的 lint 规则集（eslint、stylelint、prettier)
   - Type Script 带类型的 JavaScript

   #### Ant Design 前端组件库

   #### Ant Design Chart 简单好用的React 图表库

   #### ProComponents 模板组件

   - ProLayout - 提供开箱即用的菜单和面包屑功能
   - ProForm - 表单模板组件，预设常见布局和行为
   - ProTable - 表格模板组件，抽象网格请求和单元格样式
   - ProCard - 提供卡片切分以及栅格布局能力

   #### umi 插件

   - 内置布局
   - 国际化
   - 权限
   - 数据流

   ### 业务特性

   - 栅格布局（可自定义，可适应）
   - 简单权限管理
   - 全局初始数据（ getInitialState )
   - 默认使用 less 作为样式语言
   - OpenAPI 自动生成后端请求代码
   - 统一错误处理

   ## 业务功能

   - 提供 OpenAPI 后端接口自动生成
   - 用户登录、用户注册
   - 管理员修改用户、新建用户、查询用户、删除用户
   - 动态路由展示（权限管理）

   ## 快速上手

   1）先启动后端的万用模板

   2）使用命令生成后端请求代码

   3）将标题和 logo 等切换为个人

   4）测试业务功能

   更多开发和使用教程见本教程的 **前端万用模板开发教程**

---

**项目分区导航**：⬅️ [[20-前端万用模板开发教程|20-前端万用模板开发教程]] | 21-前端万用项目模板介绍 | ➡️ [[22-笔记|22-笔记]]