详解Ant Design of React的安装和使用方法
在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。
————引用自antd官网
antd的使用方法和注意事项：
一、安装antd
通过npm安装antd：
npm install --save-dev antd
二、antd的使用方法
（1）浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。
我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。
使用示例：
引入组件：
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
引入样式：
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
不推荐这种方式，因为这种方式会引入antd下的所有模块，这会影响应用的网络性能，并且打包后生成的文件体积会明显增大。且浏览器应该会弹出如下的警告：
（2）按照需求引入
按需求引入有两种方法，一种手动引入：
import Button from 'antd/lib/button'; import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件，前者加载的是less文件
还可以安装 babel-plugin-import 来进行按需加载。
安装方式：
npm install --save-dev babel-plugin-import
配置方式：
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: [ //
["import", {libraryName: "antd", style: "css"}] //需要配置的地方
] //
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了基于React.js实现原生js拖拽效果，继而引发的一系列思考，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要为大家介绍了React 代码拆分的几种方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
众所周知，性能是Web应用界面的关键方面，它直接影响到用户的使用体验。本文将向您展示十种提高React UI性能的特定技术和一般方法。2021-05-05
React Native 中处理 Android 手机吞字的解决方案
这篇文章主要介绍了React Native 中处理 Android 手机吞字的解决方案,作者在 React Native 0.67.4 环境下，编写了一个小 demo 来复现这个问题，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了React Hooks的深入理解与使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Docker部署SpringBoot项目到云服务器的实现步骤
Docker作为一种轻量级的容器化技术，为开发者提供了快速、便捷的部署方案，本文主要介绍了Docker部署SpringBoot项目到云服务器，具有一定的参考价值，感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了React使用ref方法与场景，React支持给任意组件添加特殊属性。ref属性接受一个回调函数，它在组件被加载或卸载时会立即执行2022-10-10
React高级指引之Refs and the DOM使用时机详解
在典型的React数据流中，props是父组件与子组件交互的唯一方式。要修改一个子组件，你需要使用新的props来重新渲染它。但是，在某些情况下，你需要在典型数据流之外强制修改子组件2023-02-02
这篇文章主要介绍了如何强制刷新react hooks组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了react写一个select组件的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论