一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下 less 的相关特性. 2.2.css modules 在样式开发过程中,有两个问题比较突出: 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面

项目需求需要使用ant-design-pro的弹出框表单并在表单出现时设置默认值 然而按照官方的示例给 <Input> 标签设置 defaultValue 时发现并没有效果.如下所示: <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="项目名称"> {form.getFieldDecorator('ProjectName', { rules: [{ required: true,

1.引入组件 // 引入 ant-design-pro import Login from 'ant-design-pro/lib/Login'; /** * UserName 账号 * Password 密码 * Submit 提交 */ const { UserName, Password, Submit } = Login; 2.调用(验证) <UserName name="userId" placeholder="请输入用户名" rules={[{re

ant-design-pro中默认只能引用less文件,引用了css文件也是无效的.所以需要在配置文件config.js中找到  cssLoaderOptions,在 getLocalIdent中加入可以引用css文件的方法:context.resourcePath.includes('.css') 代码如下: cssLoaderOptions: { modules: true, getLocalIdent: (context, localIdentName, localName) => { i

由于 ant-design-pro 的 mock 是一个单独的服务,所以没有办法整合到一起打包.暂时我是没有找到. 所以解决方案就是不用 mock . 由于 系统有异步调取,所以一旦有异步调取就会失败,所以也不能有异步. 方案如下 1.删除路由权限 2.删除基本框架异步代码 3.删除基本框架权限代码 4.添加hash功能 5.编译build改为相对路径 代码如下 1 config/config.ts // component: '../layouts/SecurityLayout', // au

最近看了AntDesignPro关于权限控制的官方文档以及自己框架里权限控制的实现,总结一下. 先贴一下官网上关于权限控制的图有利于理解 步骤如下: 判断是否有 AccessToken 如果没有则跳转到登录页面 获取用户信息和拥有权限store.dispatch('GetInfo') 用户信息获取成功后, 调用 store.dispatch('GenerateRoutes', userInfo) 根据获取到的用户信息构建出一个已经过滤好权限的路由结构(src/store/modules/perm

好久没有写博客,有空再来记一下.最近在整些小东西,需要用到前端,最开始本着对nodejs的动不动几百兆插件的恐惧, 于是使用自己以前写的 OSS.Pjax 小框架(类似国外的Pjax,利用pushState达到单页的效果),表单配合jQuery凑合一下,有兴趣的可以看下我github上的OSS.Core.AdminUI .不过本着学习精神,还是额外挑战了下React(主要是冲着AntDesignPro去的,公司团队已经在使用),结果这么稍微深入了解一下,还真没能逃掉真香定律.这篇文章主要借我个人

一.本文解决的主要问题 通过对前端静态资源站点进行代理服务设置,实现对后端API接口的代理,从而实现前端的独立部署,即通过代理的设置实现对http://IP0:Port0/api/xxx的请求转发至http://IP1:Port1/Web/WebService/xxx,其中地址http://IP0:Port0/即是前端静态资源站点地址,也是代理服务器地址:地址http://IP1:Port1/是后端API接口服务地址. 二.应用的构建和发布 官方文档 三.IIS 10 中对后端API接口代理的设

因为是新入门antd-pro这个的小白,所以在mock数据和服务器数据切换这里搞了将近2天才弄好,配置如下,供各位初学者参考,如有错误的地方,请大神指出~叩谢!! 下面开始干货: 1..roadhogrc.mock.js这个文件没有任何修改. 2..webpackrc.js 文件中添加proxy,如图,马赛克的地方是你自己的服务器地址 3.services/api.js中调用接口的地方修改为自己的接口名称 4.使用npm run start:no-proxy 启动项目 以上就可以了!!! PS:

ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架.而ant design pro呢?就是基于Ant Design这个框架搭建的中后台管理控制台的脚手架. 话不多说,今天给大家分享一个自己写的一个组件. 源码如下: index.tsx文件: import React,{Fragment} from 'react'; import styles from './index.less'; import undefined from '@/e2e/__mocks__/ant

入门非常简单 # 安装 $ yarn global add umi # 或者 npm install -g umi # 新建应用 $ mkdir myapp && cd myapp # 新建页面 $ umi generate page index # 本地开发 $ umi dev # 构建上线 $ umi build 介绍 umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功

解决方法: 在config.js 中的 externals 配置项中进行了如下配置修改: externals: { '@antv/data-set': 'DataSet', // bizcharts: 'BizCharts', },

页面效果: 如何实现: 1:分别建立SiderMenu和SubMenu组件 2.去and-desingn-vue的官方文档里copy单文件递归菜单的代码https://www.antdv.com/components/menu-cn/#components-menu-demo-single-file-recursive-menu 将代码拷贝到SiderMenu组件中. 3.将https://github.com/vueComponent/ant-design-vue/blob/master/co

最近要做一个企业的OA系统,以前一直使用EasyUI,一切都好,但感觉有点土了,想换成现在流行的Bootstrap为基础的后台UI风格,想满足的条件应该达到如下几个: 1.美观.大方.简洁 2.兼容IE8.不考虑兼容IE6/IE7,因为现在还有很多公司在使用Win7系统,系统内置了IE8 3.能通过选项卡打开多个页面,不想做单页,iframe也没关系 4.性能好,不要太笨重 5.最好以Bootstrap为基础 6.还希望在以后别的系统中能够复用. 一次次反复纠结的选择开始了,给大家介绍下我考虑过

安装: 直接 clone git 仓库 $ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project 使用命令行工具 你可以使用集成化的命令行工具 ant-design-pro-cli. $ npm install ant-design-pro-cli -g $ mkdir my-project && cd my-project $ pro new # 安装

ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以下简称Adp)打包成桌面安装使用,因为我的项目是一个企业业务计算系统,并不会常有需求的更新,因此打包成桌面应用,用户体验更好. 首先,Adp项目和Electron打包分开,就是不要把两者的依赖和配置文件放在一个项目里,这是保持项目的纯粹性,各自专注自己的事情.因此,我们就需要一个Adp项目,一个Elect

背景 一个 antd 项目打包时间太长,竟然快二十分钟了,有时还会导致内存溢出,查了一些资料(thanks funfish),解决方法如下 roadhog.js问题 roadhog.js 是类似可配置的 react-create-app,只是这个可配置,也只是部分可配置的,木有办法,只能从源码开始看 webpack 配置. 在进行 npm run build 的时候发现终端有提示 Creating an optimized production build... 的字样,而且出现的时间也挺晚的,

在 npm 打包的时候,node环境控制台报错了,JavaScript heap out of memory 解决方法如下: 不管你是angular还是其他的,找到 \node_modules\.bin\xxx.cmd 如果是angular,那就找ng.cmd 如果是ant-design-pro,那就找roadhog.cmd 加上这个 --max_old_space_size=8192 修改如下: @IF EXIST "%~dp0\node.exe" ( "%~dp0\..\

Failed at the ant-design-pro@2.2.1 lint-staged script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR!     /Users/linge/.npm/_logs/2019-0

https://github.com/ant-design/ant-design-pro https://mp.weixin.qq.com/s/Hn6hI-ubGw6N16nFzPdVLA

程序员的快速开发框架:Github上 10 大优秀的开源后台控制面板 Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者使用,那么有哪些优秀的开源免费的控制面板呢?我在 Github 上收集了一些优秀的后台控制面板,并总结得出 Top 10. AdminLTE Github Star 数 24969 , Github 地址:https://github.com/almasaeed2010/AdminLTE 非常流行的