详解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实现多个场景下鼠标跟随提示框详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了深入浅析react native es6语法的相关资料,需要的朋友可以参考下2015-12-12
近年来，随着移动端对数据可视化的要求越来越高，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库，是解决问题的好办法。下面就和小编来一起学习一下吧2019-05-05
最近两个项目都用到了React Navigation，所以就研究一下如何使用，本文主要介绍了react-navigation6.x路由库的基本使用，感兴趣的可以了解一下2021-11-11
浅谈react-native热更新react-native-pushy集成遇到的问题
下面小编就为大家带来一篇浅谈react-native热更新react-native-pushy集成遇到的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家介绍了ReactProps的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
本篇文章主要介绍了尝试自己动手用react来写一个分页组件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
React Fiber树的创建和替换过程运用了双缓存技术，直接将旧的 fiber 树替换成新的 fiber 树，这样做的好处是省去了直接在页面上渲染时的计算时间，避免计算量大导致的白屏、卡顿，现在你一定还不太理解，下面进行详细讲解,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了React-router4路由监听的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
React中useCallback useMemo使用方法快速精通
在React函数组件中，当组件中的props发生变化时，默认情况下整个组件都会重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括没有更改values/props的函数/组件。在react中，我们可以通过memo，useMemo以及useCallback来防止子组件的rerender2023-02-02
最新评论