Ant Design Pro 网站搭建教程

申芹琴

于 2024-09-03 07:10:10 发布

阅读量494

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00673/article/details/141836287

Ant Design Pro 网站搭建教程

ant-design-pro-site项目地址:https://gitcode.com/gh_mirrors/ant/ant-design-pro-site

Ant Design Pro 是一个基于 Ant Design 的企业级中后台前端框架模板，旨在提供开箱即用的 UI 解决方案。本教程将指导您了解其配套网站 ant-design-pro-site 的关键组成部分，包括项目目录结构、启动文件以及配置文件的概览。

1. 项目目录结构及介绍

Ant Design Pro 网站项目遵循了一定的结构布局，以确保清晰和可维护性：

.
├── public                     # 静态资源目录，如 favicon.ico 和 index.html 文件
├── src                        # 主要源代码目录
│   ├── components             # 自定义组件
│   ├── models                 # 全局的数据模型管理
│   ├── pages                  # 应用页面
│   ├── services               # 数据服务，比如 API 调用
│   ├── utils                  # 工具函数
│   ├── layouts                # 页面布局
│   ├── routes.js              # 路由配置
│   └── global.css             # 全局样式
├── .gitignore                 # Git 忽略文件配置
├── package.json               # Node.js 项目配置，依赖管理和脚本命令
├── README.md                  # 项目说明文档
└── config.js                  # 应用配置文件

说明：

public: 包含不会经过Webpack编译的静态文件。
src: 核心开发区域，包含了所有业务逻辑、界面和路由配置等。
models: 用于集中处理应用状态管理的地方。
pages: 项目中的各个页面组件。
routes.js: 定义了应用程序的路由结构。

2. 项目的启动文件介绍

在 Ant Design Pro 的配套网站项目中，主要的启动文件位于 package.json 中定义的脚本命令。通常，启动开发服务器的命令是：

"scripts": {
    "start": "umi dev",       // 启动开发环境
    ...
}

通过运行 npm start 或 yarn start 命令，可以启动本地开发服务器，利用 UmiJS 框架提供的热重载功能快速迭代开发。

3. 项目的配置文件介绍

`config.js`

这是 UmiJS 配置文件，用于自定义各种应用级配置，包括路由、代理设置、CSS 预处理器、webpack 插件等。示例配置可能包括：

export default {
    // 配置路由
    routes: [...],
    // 静态资源路径
    assetsPublicPath: '/',
    // 开发环境下的代理设置
    proxy: {
        '/api': {
            target: 'http://localhost:3000',  // 示例目标API地址
            changeOrigin: true,
            pathRewrite: {
                '^/api': '',
            },
        },
    },
    // 其他配置项...
};