ant引入html页面,antd引入普通html使用,将ant Design本地化

本文介绍了如何在不使用npm和dva复杂配置的情况下,本地化antd进行React开发。通过直接引入react和antd的CDN链接,简化开发环境。同时,讨论了本地化后如何更好地与Flask的模板渲染机制结合,提供了具体的操作步骤,包括引入antd组件和编写测试代码。这种方法对于那些希望快速启动项目并避免复杂构建流程的开发者非常有用。
摘要由CSDN通过智能技术生成

一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合。下面是具体的实现方法:

1.将react的相关链接引入:

也可以用cdn的链接,我以及将react下到本地使用了,链接可能比较卡。

2.将antd引入,只需要下面这两个:

在之前的dva做的项目中也有,可复制粘贴过来,路径在/dva-quickstart/node_modules/antd/dist...

3.写代码测试一下,html引入:

antd组件代码:

48304ba5e6f9fe08f3fa1abda7d326ab.png

// import { Button, Radio, Icon } from 'antd';

ReactDOM.render(

Primary

Default

Dashed

Danger

, document.getElementById('message1'));

48304ba5e6f9fe08f3fa1abda7d326ab.png

这需要注意的是,所有组件代码都可从官网中找到,但是import显然是起不到作用的,去掉就行了;

antd是一个对象,Button是其一个组建,引用的时候需要加上antd.才能正常使用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值