# Front-develop-template

**Repository Path**: syuuuuuuuuuu_admin/front-develop-template

## Basic Information

- **Project Name**: Front-develop-template
- **Description**: 前端开发模版的Ant-design-初始化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-17
- **Last Updated**: 2025-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Ant Design 前端项目初始化模板

基于 Ant Design 的 React 前端项目初始化模板，集成基础配置和最佳实践，助你快速开启开发。

## 🚀 快速开始

### 1. 克隆仓库

```bash
git clone https://github.com/your-repo/antd-template.git
cd antd-template
```
### 2. 安装依赖
```bash
# 使用 npm
npm install

# 或使用 yarn
yarn
```
### 3. 启动开发服务器
```bash
npm start
# 或
yarn start
```
```
项目结构
├── config/           # 配置文件
├── mock/             # 模拟数据
├── public/           # 静态资源
├── src/
│   ├── assets/        # 图片/样式等静态资源
│   ├── components/    # 公共组件
│   ├── layouts/       # 页面布局
│   ├── pages/         # 业务页面
│   ├── routes/        # 路由配置
│   ├── services/      # API 接口
│   ├── utils/         # 工具函数
│   ├── App.tsx        # 入口组件
│   └── main.tsx       # 入口文件
├── .env              # 环境变量
├── .eslintrc         # ESLint 配置
├── .stylelintrc      # StyleLint 配置
└── tsconfig.json     # TypeScript 配置
```
## 🛠 使用 Ant Design
1. 基础组件使用 
```
import { Button, DatePicker } from 'antd';
const Demo = () => (
<>
<Button type="primary">AntD Button</Button>
<DatePicker />
</>
);
````
### 
2. 表单示例
```
import { Form, Input, Button } from 'antd';
const DemoForm = () => {
const [form] = Form.useForm();
return (
<Form form={form} layout="vertical">
<Form.Item
label="用户名"
name="username"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入" />
</Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form>
);
};
```
## 🎨主题定制
```
创建 src/theme.less 文件：
@primary-color: #1890ff;       // 全局主色
@link-color: #1890ff;          // 链接色
@success-color: #52c41a;       // 成功色
@warning-color: #faad14;       // 警告色
@error-color: #ff4d4f;         // 错误色
在 config/config.ts 中配置：
import { defineConfig } from 'umi';

export default defineConfig({
  theme: {
    '@primary-color': '#1890ff',
    // 其他自定义变量...
  },
});
```
## 🗺 路由配置
```
使用 react-router-dom@6 配置路由：
// src/routes/index.tsx
import { createBrowserRouter } from 'react-router-dom';
import Home from '../pages/Home';
import About from '../pages/About';

export const router = createBrowserRouter([
{
path: '/',
element: <Home />,
},
{
path: '/about',
element: <About />,
},
]);
```
## 🚢 部署说明
```
1. 构建生产版本
pm run build
# 或
yarn build
生成静态文件到 dist/ 目录
2. 常用部署命令
# 代码格式检查
npm run lint

# 类型检查
npm run type-check

# 清理缓存
npm run clean
```