详解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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
利用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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
微信access_token的获取开发示例
2015/04/16 PHP
初识PHP中的Swoole
2016/04/05 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
js一组验证函数
2008/12/20 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
javascript date格式化示例
2013/09/25 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
js数组操作常用方法
2014/05/08 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python 变量的创建过程详解
2019/09/02 Python
django-csrf使用和禁用方式
2020/03/13 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
自考自我鉴定范文
2013/10/30 职场文书
提拔干部考察材料
2014/05/26 职场文书
大学生个人总结范文
2015/02/15 职场文书