详解Ant Design of React的安装和使用方法


Posted in Javascript onDecember 27, 2018

在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 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下的所有模块,这会影响应用的网络性能,并且打包后生成的文件体积会明显增大。且浏览器应该会弹出如下的警告:

详解Ant Design of React的安装和使用方法

(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'
   }
  ]
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
jquery validation验证表单插件
Jan 07 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
利用Angular2的Observables实现交互控制的方法
Dec 27 #Javascript
angular 用Observable实现异步调用的方法
Dec 27 #Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 #Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 #Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 #Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 #Javascript
angular6的table组件开发的实现示例
Dec 26 #Javascript
You might like
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
thinkphp缓存技术详解
2014/12/09 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python操作yaml说明
2020/04/08 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
办理居住证介绍信
2014/01/15 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
党的生日演讲稿
2014/09/10 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
会议开幕词
2015/01/28 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
追悼会悼词大全
2015/06/23 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js