精华内容
参与话题
问答
  • antd

    千次阅读 2017-08-18 15:11:08
    ant.design是React组件,react是当前最流行的前端框架之一
    ant.design是React组件,react是当前最流行的前端框架之一
    
    展开全文
  • antd-init Ant Design demo tool. ⚠️⚠️⚠️ antd-init@2 is for demo only. If you want to create projects, it's better to init with create-umi. umi is a routing-based framework that supports next....
  • 基于React+antd的后台管理模板(可预览)

    万次阅读 多人点赞 2018-08-05 13:42:53
    自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,不涉及后台交互。 特点: 我用

    自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,比较简单不涉及后台交互。

    github地址:基于React+antd实现后台模板
    预览地址:预览地址

    项目重构地址:react+koa实现登陆、聊天、留言板功能后台
    重构预览地址:重构预览地址

    登录的背景图比较大,所以做了一个loading效果,等图载入完毕后再显示登录页面,首次载入可能比较慢

    技术栈

    • react
    • antd
    • react-router
    • mobx
    • canvas
    • ES6
    • cookie

    自己参考了其他优秀的插件,比如动态打字效果、背景粒子效果、shuffle(洗牌)全屏插件等,自己对有些插件封装成类使用

    所有路由都需要登录才可进入,自己封装了PrivateRoute组件来实现路由认证,登录信息保存在cookie中,原本是保存在store中,但是刷新页面后登录状态丢失,所以就保存在cookie中
    登录背景图太大,使用了TinyPNG进行压缩,并编写了一个loading效果

    项目目录结构

    这里写图片描述
    assets----存储静态图片资源和共用icon图标
    components----存储共用组件
    routes----业务页面入口和常用模板
    store----状态管理
    utils----工具函数

    项目截图

    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    问题

    整个demo不复杂,主要是熟悉react和路由等,在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下,所以打包的路径要改为相对路径,不能使用绝对路径,我在package.json中添加了homepage:’.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性,结果还是出现js路径错误,我一直以为是webpack打包的问题,找了很久才发现是因为BrowserRouter,将BrowserRouter改为HashRouter就访问正确。
    使用react-router(v4)时,如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。
    关于BrowserRouter和HashRouter的区别,可以参考:关于 reactrouter 4.0版本中 BrowserRouter和HashRouter的问题react-router v4中 HashRouter 和 BrowserRouter的使用

    最后

    demo是我断断续续写的,只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd,整个demo中参考了一些其他人的想法,如动画效果等。另外基于vue的个人项目可以看这个仿制移动端QQ音乐

    其他个人项目



    觉得不错的给个star鼓励支持!^_^

    展开全文
  • Antd help prop

    2020-11-27 08:11:55
    m switching a project from bootstrap to antd and discovered this feature was missing for antd. Seemed like the best fix was to map the help prop to the "extra" prop on the antd Form.Item ...
  • antd 开发框架包

    2018-10-19 23:45:49
    antd 开发框架包 1组件化&;antd将UI分成不同的组件,每个组件都独立封装缺陷下面这些都没有:事件系统(除了原生的DOM事件)AJAX功能数据层Promises应用程序架构单单reactjs的代码压缩后也需要147k以上reactjs代码量最多...
  • <div><p>Excerpts from Antd ;theme'-property-in-package.theme-%28recommended-way%29">Customize Theme-Recommanded Way</a>: <pre><code> This approach is working only when using atool-build(built in ...
  • ERROR in node_modules/ng-zorro-antd/empty/nz-embed-empty.component.d.ts(17,17): error TS1110: Type expected. node_modules/ng-zorro-antd/empty/nz-empty.component.d.ts(11,17): error TS1110: Type ...
  • 从cmd改成git-bash,尝试cnpm,npm install antd --save --no-bin-links 都失败,报错: × Install fail! Error: UNKNOWN: unknown error, symlink 'E:\workspace\181104\react1104\node_modules\_enquire.js@...
  • Antd管理系统

    2018-11-01 17:12:35
    React+Antd后台管理系统,项目源码地址:https://github.com/zhaoyu69/antd-spa
  • React引入antd

    2017-12-20 17:34:25
    随着React技术的不断火热,前端人员开始学习React。React需要引入antd,也许这篇文章能帮助到您。
  • ## 是用antd pro搭建的js项目 # 是侧边栏路由的样式问题 百度这方面的没有,只有路由是怎么生成的等等。效果图: ![图片说明](https://img-ask.csdn.net/upload/201911/27/1574851500_991425.png) pro的路由是...
  • 如图,引入antd-mobile后为了实现按需加载以及自定主题的功能,需要下载 依赖包babel-plugin-import和react-app-rewired。而由于react-app-rewired在2.0之后的版本删除了injectBabelPlugin函数,需要下载customize-...
  • antd pro 升级 antd4.0

    千次阅读 2020-05-07 15:34:42
    "ant-design-pro"的项目,版本是2.1.1 ,由于4.0pro页面结构大变,不可能完全删除弃用的icon,反正我不会改了 开始升级,第一步修改以下依赖 "dependencies": { ... "antd": "^4.0.0", "reac...

      "ant-design-pro"的项目,版本是2.1.1 ,由于4.0pro页面结构大变,不可能完全删除弃用的icon,反正我不会改了,

    这里只是把antd的版本升级,就是UI的组件升级  。开始升级,

     

    第一步修改以下依赖

     "dependencies": {
        "@ant-design/compatible": "^1.0.0",    //兼容3.0,form和icon组件
        "antd": "^4.0.0",
        "react-dom": "^16.9.0",
        "react": "^16.9.0",

    }

    第二步,自动把3.0的语法改成4.0的,主要是通过@ant-design/compatible兼容

    1 通过 npx 直接运行 npx -p @ant-design/codemod-v4 antd4-codemod src

    2 或者全局安装 # 使用 npm npm i -g @ant-design/codemod-v4 # 或者使用 yarn yarn global add @ant-design/codemod-v4 #

    运行 antd4-codemod src

     

    运行 antd4-codemod src 可能会有错误,“Sorry that there are still some git changes”,解决方法先1.运行git init       2.在.gitignore里面加入  /*   ,用来忽略所有文件。这样就可以运行命令了,然后删除刚才init的 .git文件夹

     

    第三步, 修改上面命令的报错,完成

     

    展开全文
  • Antd3升级Antd4

    2020-08-14 14:53:02
    yarn upgrade antd@3.26.12 --更新antd包到3版的终极版 yarn start --跑下项目,看Ok不 ant3 执行下面命令直接升级项目中的旧代码为新版代码 执行前确认本地代码占存或push到线上了 npx -p @ant-design/codemod-v4 ...

    删除本地package-lock.json、node_modules
    yarn install --初始化项目
    yarn upgrade antd@3.26.12 --更新antd包到3版的终极版
    yarn start --跑下项目,看Ok不

    ant3 执行下面命令直接升级项目中的旧代码为新版代码
    执行前确认本地代码占存或push到线上了
    npx -p @ant-design/codemod-v4 antd4-codemod src
    更新
    yarn add react --latest --(如果是最新跳过)
    yarn add react-dom --latest --(如果是最新跳过)

    yarn add @ant-design/compatible --根据命令提示输入
    yarn upgrade antd --latest --根据命令提示输入

    参考

    http://www.mamicode.com/info-detail-2943048.html

    展开全文
  • 使用了一个基于Antd变量的组件。 如果 <code>node_modules</code> 中的其他组件使用了Antd的变量,那么当调用 <code>window.less.modifyVars(vars)</code> 修改变量之后,<code>node_modules</code> 中...
  • antd": "^2.7.4", "uniforms-antd": "^1.13.1", I get error <pre><code>js You are using a whole package of antd, please use.... </code></pre> <p>My package <pre><code>js // ...
  • Vue Antd

    2020-02-25 13:20:23
    vue-alain 是基于 vue 和 Ant Design of Vue(Ant Design 的 vue 版本) 基础组件库的中后台前端,使用vue vue cli 3.0 typescript antd antd pro Ant Design Vue技术栈,参考并使用了ng-alain相关内容,秉承 Ant ...
  • 改变antd组件样式的方法

    万次阅读 2019-06-23 15:23:29
    实际项目中大家经常会引入antd进行项目开发,对于如何更改antd组件的样式应该也是很多朋友都关心的,笔者今天就给大家分享一下笔者知道的方法: 一:用CSS覆盖掉antd原有的样式: 这是更改tooltip的方法,在控制台...
  • antd表格

    千次阅读 2018-10-04 22:41:19
    import React from "react"...antd"; import axios from "axios"; export default class BasicTable extends React.Component{ constructor(props,context){ super(props,co...
  • antd 分页

    千次阅读 2019-05-17 17:51:47
    1,效果图如下 2,代码如下 import React, { PureComponent } from 'react'; import { findDOMNode } from 'react-dom';...import moment from 'moment';...import { Link } from 'react-router-dom';...
  • react antd 2.12.3 行编辑

    2020-09-24 10:02:36
    react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react antd 2.12.3 行编辑react ...
  • antd总结

    2019-03-07 09:26:34
    antd使用总结 demo总结 1.demo目录结构 2.demo简介 antd为我们提供了开箱即用的react组件,demo主要是利用antd的各个组件实现页面效果,antd官网https://ant.design/index-cn antd总结 1.安装 $ npm ...
  • umi-antd-pro-antd-pro.zip

    2019-08-06 10:44:53
    ant design的框架搭建,根据实际情况进行更改和选择。
  • antd button

    2018-09-21 11:19:00
    引用 :import { Button } from 'antd'; 1 <Button type = "primary" //按钮样式颜色 shape = "circle" //按钮圆角(默认为方形) icon = "search" //加图标 ,string (search : 搜索 ,download : 下载 )...
  • antd使用

    2019-09-20 14:31:58
    antd全局中文配置 import zhCN from 'antd/es/locale/zh_CN'; function App() { return ( <div locale={zhCN}> // 全局包在外面 </div> ); } antd的日期组件默认是显示英文,中文配置方法 ...
  • AntD 问题

    2019-03-28 15:21:55
    1.antd的Select,Cascader,Datepicker的下拉框随着页面的滚动而滚动 这个问题是官方默认相对于页面body定位, 只要改为相对于父级定位就可以了 Select,Cascader使用 getPopupContainer={trigger => trigger....
  • React Antd实现antdList页面布局

    千次阅读 2019-10-21 11:40:54
    React antd是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。 使用地址:https://ant.design/docs/react/introduce-cn 使用 npm 或 yarn 安装 $ npm install antd --save $ yarn...

空空如也

1 2 3 4 5 ... 20
收藏数 10,682
精华内容 4,272
关键字:

antd