Ant-Design-Pro攻略

本文档详细介绍了如何关闭前端项目的国际化设置,菜单图标与菜单项的配置,以及如何修改应用的端口号。此外,还涵盖了页面默认图标、title、header、footer、右上角内容以及ProTable组件的定制方法,包括搜索条件的字段属性调整。

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

一、关闭国际化

要关闭国际化,在config-config.ts下,将layout里面locale改为false

二、菜单与菜单图标

菜单图标为图标名称加上主题做为后缀,例如<HomeOutlined />,菜单名为home.

在config下的routes.ts中配置路由,显示菜单,菜单图标修改icon,icon为菜单名

三、修改端口号

package.json中修改“start”:

"start": "set PORT=9000 && umi dev",

四、修改页面默认图标与title

1.加载页模板展示pro 与 ant design修改

           pages/document.ejs

title修改标签页

 img 修改 Pro

修改默认Ant Design

2,登录后修改标签页图标与title

图标修改public中的favicon.ico,title修改config/defaultSettings.ts中的title

3.header 中左上角图标与title

 修改config/defaultSettings.ts中的title与logo

4.修改fotter

src/components/Footer/index.tsx中的

defaultMessage与title

5.header 右上角内容修改

修改src/components/RightContent/index.tsx

6.ProTable搜索条件修改属性值,比如把select修改为带搜索图标的下拉框,主要在于fieldProps属性

    {
      title: '项目部',
      dataIndex: 'projectDept',
      fieldProps: {
        options: cascaderOptions,
        fieldNames: {
          children: 'children',
          label: 'title',
        },
        showSearch: true,
        filterTreeNode: true,
        multiple: true,
        treeNodeFilterProp: 'title',
      },
    },

7.antd-pro  valueType: 'treeSelect' 搜索

{
      title: '项目部',
      dataIndex: 'projectDept',
      valueType: 'treeSelect',
      request:async () => [
        {
          title: '项目部1',
          value: '1',
          children: [
            {
              title: '项目部11',
              value: '11',
            },
            {
              title: '项目部12',
              value: '12',
            },
          ],
        },
        {
          title: '项目部2',
          value: '2',
          children: [
            {
              title: '项目部21',
              value: '21',
            },
            {
              title: '项目部22',
              value: '22',
            },
          ],
        },
      ],
      fieldProps:{
        showArrow: true,
        filterTreeNode: true,
        showSearch: true,
        dropdownMatchSelectWidth: false,
        labelInValue: true,
        autoClearSearchValue: true,
        multiple: true,
        treeNodeFilterProp: 'title',
        fieldNames: {
          label: 'title',
        },
      },
    },

 

### 关于 Ant-Design-Vue Pro 的使用指南 Ant Design Vue 是基于 Ant Design 设计体系的 Vue 实现,提供了丰富的组件库来帮助开发者快速构建现代化的企业级前端界面。然而需要注意的是,官方并没有提供名为 **Ant-Design-Vue-Pro** 的独立版本或模块[^1]。通常情况下,“Pro”可能是指社区版增强功能或者某些第三方封装的功能集合。 以下是关于如何获取文档、示例代码以及学习资源的相关说明: #### 官方文档 可以访问 Ant Design Vue 的官方网站以获得详细的 API 和使用方法: - 官网链接: https://www.antdv.com/docs/vue/introduce-cn/ 该网站涵盖了基础安装、全局配置、主题定制等内容,并附带大量交互式示例供参考。 #### 示例代码 对于实际开发中的需求,可以通过以下方式找到更多样化的案例: 1. GitHub 上有许多开源项目实现了基于 Ant Design Vue 构建的应用程序,例如 `ant-design-pro` 的 Vue 版本移植尝试。 2. 参考引用提到的内容也展示了基本集成流程,在 main.js 中完成初始化设置之后即可调用所需组件。 ```javascript // src/main.js 或者 ts 文件 import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd); ``` 如果希望了解更复杂的业务场景实现,则建议研究类似的大型框架源码结构,比如路由管理部分就涉及到了动态加载机制[^2]: ```javascript const routes = [ { path: '/example', component: () => import('@/views/example.vue') // 按需懒加载 } ]; ``` #### 教程推荐 由于没有专门针对所谓 “pro” 版本的教学资料,可以从常规入门课程起步再逐步深入探索高级特性。网络上有不少博主分享了自己的实践经验文章,覆盖范围广泛包括但不限于表单验证、表格操作等方面的知识点。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值