Ant Desing Pro config文件浅析

本文分析了Ant Design Pro的config文件,包括process.env获取Node进程信息,defineConfig的设置如hash、antd、dva、dynamicImport、targets、theme和manifest。config文件用于配置项目构建、浏览器兼容性和主题等。routes部分讨论了布局文件的加载逻辑,如UserLayout、SecurityLayout和BasicLayout,允许自定义布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(1)process.env

process是node的一个全局模块,可以用它来得到node进程的一些相关信息,比如环境变量

(2)defineConfig


hash

配置是否让生成的文件包含 hash 后缀,通常用于避免浏览器加载缓存。
image.png


antd

整合 antd 组件库

antd: {
     
     
    dark: true, // 开启暗色主题
    compact: true, // 开启紧凑主题
},

dva

整合 dva 数据流

dva: {
     
     
    immer: true, // 表示是否启用 immer 以方便修改 reducer
},

dynamicImport

是否启用按需加载,即是否把构建产物进行拆分

 dynamicImport: {
     
     
To implement multiple tabs in Ant Design Pro, you can use the `Tabs` component provided by Ant Design. Here are the steps: 1. Import the `Tabs` component from Ant Design: ``` import { Tabs } from 'antd'; ``` 2. Define the tabs and their content: ``` const { TabPane } = Tabs; function callback(key) { console.log(key); } <Tabs defaultActiveKey="1" onChange={callback}> <TabPane tab="Tab 1" key="1"> Content of Tab Pane 1 </TabPane> <TabPane tab="Tab 2" key="2"> Content of Tab Pane 2 </TabPane> <TabPane tab="Tab 3" key="3"> Content of Tab Pane 3 </TabPane> </Tabs> ``` In this example, we have defined three tabs with the content for each tab. We have also defined a `callback` function that will be called when the active tab changes. 3. Customize the tabs using props: The `Tabs` component provides several props that can be used to customize the appearance and behavior of the tabs. Some of the commonly used props are: - `defaultActiveKey`: The key of the tab that should be active by default. - `activeKey`: The key of the currently active tab. - `onChange`: A function that will be called when the active tab changes. - `tabBarStyle`: An object that can be used to style the tab bar. - `tabBarExtraContent`: Content that should be displayed to the right of the tabs. For example, you can set the `tabBarStyle` prop to change the background color of the tab bar: ``` <Tabs defaultActiveKey="1" onChange={callback} tabBarStyle={{ background: '#fff' }} > ... </Tabs> ``` You can also use the `tabBarExtraContent` prop to add buttons or other elements to the right of the tabs: ``` <Tabs defaultActiveKey="1" onChange={callback} tabBarExtraContent={ <Button type="primary" size="small"> New Tab </Button> } > ... </Tabs> ``` In this example, we have added a `Button` component to the right of the tabs.
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值