精华内容
下载资源
问答
  • antd

    千次阅读 2017-08-18 15:11:08
    ant.design是React组件,react是当前最流行的前端框架之一
    ant.design是React组件,react是当前最流行的前端框架之一
    
    展开全文
  • 基于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鼓励支持!^_^

    展开全文
  • 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

    2021-01-21 10:11:23
    首先要下载antd依赖包 yarn add antd 重启vscode能在node_modules里找到antd包,dist里有antd.css样式 在需要用的地方导入antd以及样式文件 如果需要用图标等库,要引入

    首先要下载antd依赖包 yarn add antd
    重启vscode能在node_modules里找到antd包,dist里有antd.css样式
    在需要用的地方导入antd以及样式文件
    在这里插入图片描述如果需要用图标等库,要引入
    如何按需导入
    在这里插入图片描述下载 yarn add react-app-rewired customize-cra
    下载后需要在package.json中再修改
    红色红的要改成绿色的
    根目录是和package.json同级的目录,不在任何文件夹里,在根目录下创建config-overrides.js文件,并将代码复制粘贴上去
    使用 babel-plugin-import
    yarn add babel-plugin-import
    在把之前config-overrides.js里的东西删掉
    在这里插入图片描述
    把这堆绿的粘上去
    这样就不需要引入样式antd.css了

    展开全文
  • antd", [ { "libraryName": "antd", "libraryDirectory": "lib", "style": true }, { "libraryName": "antd-mobile", "library...
  • 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...
  • 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 ...
  • 改变antd组件样式的方法

    万次阅读 2019-06-23 15:23:29
    实际项目中大家经常会引入antd进行项目开发,对于如何更改antd组件的样式应该也是很多朋友都关心的,笔者今天就给大家分享一下笔者知道的方法: 一:用CSS覆盖掉antd原有的样式: 这是更改tooltip的方法,在控制台...
  • AntD Admin An excellent front-end solution for enterprise applications. Preview - https://antd-admin.zuiidea.com Documentation - https://doc.antd-admin.zuiidea.com FAQ - ...
  • antd & antd-mobile的使用

    2019-12-03 13:03:10
    链接: antd官网 首先安装antd cnpm i antd 主要是全部引入与按需导入 全局引入 import { DatePicker } from 'antd' 手动引入样式 import 'antd/dist/antd.css'; 按需导入 首先配置文件 // .babelrc 或者 webpack....
  • 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-09-20 14:31:58
    antd全局中文配置 import zhCN from 'antd/es/locale/zh_CN'; function App() { return ( <div locale={zhCN}> // 全局包在外面 </div> ); } antd的日期组件默认是显示英文,中文配置方法 ...
  • antd按需引入和自定义antd类名 一:antd样式引入有两个方式 一次性全部引入(不推荐) 一次性全部引入antd的样式,打包的时候样式文件会变得很庞大,导致第一次加载的时候需要的时间很长,用户体验差 // 入口...
  • 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 ...
  • 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...
  • 安装antd

    2020-04-14 16:34:31
    npm install --save antd@4.1.3 2.引入自动导包的插件 npm install babel-plugin-import --save-dev 3.在根目录创建新文件.babelrc,放入以下代码 { "plugins": [ ["import", { "libraryName": "antd", ...
  • antd镜像

    2020-07-24 21:19:17
    Antd国内镜像地址:https://ant-design.gitee.io/index-cn
  • 项目做了好多年,框架一直用的antd3.X的,一直在3的版本上升级,React也一直用的16.6的版本,所以也不支持react Hook。 最近领导让把所有项目的antd升级都到4.X的版本,方便以后迭代,所以升级研究了一下,有antd4-...
  • antd 试水

    2018-12-28 10:59:41
    sudo cnpm install antd --save sudo cnpm install antd-init -g 2.创建 mkdir antdtest &amp;&amp; cd antdtest antd-init 3.替换内容 import React from 'react'; import ReactDOM from 'react-dom...
  • dvaJS配置antd以及按需引入

    万次阅读 2019-06-06 07:20:38
    首先通过npm || cnpm || yarn等方式在项目目录安装antd 和 babel-plugin-import。 babel-plugin-import是用来按需加载antd的脚本和样式的。 $ npm install antd babel-plugin-import -S 编辑 .webpackrc文件,使 ...
  • 1.antd官网:https://ant.design/docs/react/introduce-cn2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save2、在您的react项目的css文件中引入 Antd的css@import...
  • 初识antd Pro 原因 一只后端猿接到了一个全栈的活,要开发一个完整的独立平台。前端只会html,但又想把前端做的很漂亮,怎么办? 网上冲浪找办法 发现一基于react的开源的前端框架。 antd pro,前身好像是antd。这只...
  • antd 按需加载组件,antd按需加载样式 使用 babel-plugin-import,babel模块化导入插件,兼容antdantd-mobile,lodash等库 配置:{ "libraryName": "antd", style: "css" } 使用style:导入真正的css源文件,并且...
  • antd登录

    2020-05-12 15:52:34
    import { Form, Icon, Input, Button } from ‘antd’; export default @Form.create({ mapPropsToFields(props) { return { }; }, }) class App extends React.Component { handleSubmit = e => { e....
  • antd tree

    2020-03-21 22:05:42
    问题:当我使用antd 里面的tree组件时,设置了expandedKeystone,变为受控组件,发现第一个tree的渲染并没有按照我的state状态变化,打印发现数据没有问题 后来发现了原因: 马虎 其中一个的子节点忘记设计了key值 ...
  • React引入antd

    2017-12-20 17:34:25
    随着React技术的不断火热,前端人员开始学习React。React需要引入antd,也许这篇文章能帮助到您。
  • Spring Boot 开发的 Antd Pro 后台依赖关系Antd Pro 前端Antd Pro Helper演示接口Antd演示页面接口: AntdController.java接口URL: /api/auth_routesAntd演示页面接口: AntdRestController.java接口URL: /api/*跨域...
  • antd的使用

    万次阅读 2019-05-22 07:31:36
    antd的使用:antd的官网有每一个组件的详细使用代码,下面简单描述一下 1:安装 npm install antd --save 2.样式引入import ‘antd/dist/antd.css’; 3.eg 引入import { Input } from ‘antd’; 4.使用<Input ...
  • 1.antd官网:https://ant.design/docs/react/introduce-cn2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save2、在您的react项目的css文件中引入 Antd的css@import...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,531
精华内容 5,812
关键字:

antd