详解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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
javascript实用方法总结
Feb 06 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 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中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP attributes()函数讲解
2019/02/03 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
Python实现控制台中的进度条功能代码
2017/12/22 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
python如何进入交互模式
2020/07/06 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
创业资金计划书
2014/02/06 职场文书
便利店投资创业计划书
2014/02/08 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
教师自查自纠材料
2014/10/14 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL