antdesignofreact的安装和使用方法

txwslyf txwslyf     2022-09-03     697

关键词:

在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 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'
            }
        ]
    }
};

a15react+antdesignantdesignui框架

AntDesignofReact文档1安装:$ cnpminstallantd--save2在css文件中引入Antd的css样式表  @import ‘~antd/dist/antd.css‘;(例如在App.css文件中最上方引入,但不要放在编码上面)  查看详情

docker安装和使用

1,Docker安装Docker是啥,以及其与虚拟机的对比,就不介绍了,网上有很多资源可以学习和了解。 本篇文章重点介绍Docker的安装和测试使用。Docker的安装,分为离线安装和在线安装两种方式,方便不同的应用场景使用不同的... 查看详情

sublime插件安装和使用

Sublime插件安装和使用插件安装的方式:插件安装方式一:直接安装下载插件安装包,然后把安装解压到packages目中,按成安装(菜单->首选项->浏览插件)插件安装方法二:使用packagecontrol组件安装Packagecontrol的介绍Packagecontro... 查看详情

babel的安装和使用方法

要使用Babel,我们需要nodeJS的环境和npm,主要安装了nodeJS,npm就默认安装了,现在安装nodeJS很简单了,直接下载安装就好了;安装es-checker在使用Babel之前,我们要先检测一下当前node对es6的支持情况,我们使用先es-checker,命令行... 查看详情

grunt的使用方法,环境配置和插件安装

...e是否安装:node-v验证npm是否安装:npm-v 下面是具体的使用方法:1》安装全局的配置环境npminstall-ggrunt-cli2》安装grunt在命令行中运行命令npminstallgrunt--save-dev(这样输入的是每 查看详情

socketlog的安装和使用

...数,加载的性能,错误调试等等方面,所以掌握socketlog的安装和使用对微信公众号开发等api型开发来说就正如常言道磨刀不误砍柴工socketlog安装客户端安装插件        插件下载地址:htt 查看详情

quagga的安装和使用

Quagga的安装和使用测试环境:VM12  CentOS6.564位Quagga是一款功能比较强大的开源路由软件,支持rip,ospf,bgp等协议。1. Quagga的安装在CentOS下可以直接使用yum–yinstallquagga进行安装,也可以使用quagga的源代码包进行编译安装... 查看详情

cmake的安装和使用

1、Cmake的安装下载https://cmake.org/download/我下载的是3.14.0,如下:安装加压下载文件到安装路径 添加环境变量:E: 查看详情

quagga的安装和使用

Quagga的安装和使用测试环境:VM12  CentOS6.564位Quagga是一款功能比较强大的开源路由软件,支持rip,ospf,bgp等协议。1.      Quagga的安装在CentOS下可以直接使用yum–yinstallquagga进行安装,也可以使用quagga的... 查看详情

postman的安装和使用方法详解

文章来源:http://www.cnplugins.com/tool/specify-postman-methods.html非官网安装这是一种直接通过打包已经安装的扩展程序的方式,来进行我认为的「非法安装」,但没办法,只能这样。我会给你一个安装包,见附件。你应该下载下来,解... 查看详情

转载——git的安装和使用

...用。安装:有关git于svn区别及其优势不再赘述,现简介其使用方法,因为我的电脑是win7系统,所以需要到官网(https://git-for-windows.github.io/)下载msysgit。(图形界面的话还需安装TortoiseGit)下载完成,双击安装,一路选择默认设置... 查看详情

yarn的安装和简单使用(代码片段)

yarn的安装和简单使用yarn是一款取代npm的包管理工具yarn的优点速度超快。Yarn缓存了每个下载过的包,所以再次使用时无需重复下载。同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn... 查看详情

git的安装和使用

1、安装下载:https://git-scm.com/downloads我下载的是:Git-2.19.1-64-bit.exe安装:a.双击Git-2.19.1-64-bit.exe开始安装。b.除安装路径以外,别的都选了默认。c.检查安装完成。2、使用打开软件:  查看详情

windows平台下liteide的安装和使用

1.安装Go语言并设置环境变量参考博客《Windows平台下Go语言的安装和环境变量设置》。2.MinGW的下载和安装Windows下的Go调试还需要安装MinGW。2.1下载安装工具的安装最新版本下载安装工具下载地址http://sourceforge.net/projects/mingw/,大小... 查看详情

pytesseract库的安装和使用

...此要怎么解析图片上的信息呢?在Google上查了一下,需要安装pytesseract和pillow(我用的python3.7)和Tesseract-OCR1.安装pytesseract  pipinsatllpytesseract2.安装pillow  pipinstallpillow3.安装Tesseract-OCR(https://githu 查看详情

windows安装和使用zookeeper

来获取,Zookeeper的安装非常简单,下面将从单机模式和集群模式两个方面介绍Zookeeper的Windows安装和配置.首先需要安装JdK,从Oracle的Java网站下载,安装很简单,就不再详述。单机模式单机安装非常简单,只要获取到Zookeeper的压缩... 查看详情

python的安装和简单使用

python的安装和简单使用一、初识python1、定义2、优点3、应用领域二、安装python1、下载python2、Python安装向导3、测试是否安装成功三、简单的python运行1、使用idle2、相关小知识一、初识python1、定义Python由荷兰数学和计算机科学研... 查看详情

python的安装和简单使用

python的安装和简单使用一、初识python1、定义2、优点3、应用领域二、安装python1、下载python2、Python安装向导3、测试是否安装成功三、简单的python运行1、使用idle2、相关小知识一、初识python1、定义Python由荷兰数学和计算机科学研... 查看详情