antd引入普通html使用,将ant Design本地化
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合。下面是具体的实现方法:
1.将react的相关链接引入:
<script src="/static/react/react.min.js"></script>
<script src="/static/react/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
也可以用cdn的链接,我以及将react下到本地使用了,链接可能比较卡。
2.将antd引入,只需要下面这两个:
<script src="/static/antd/dist/antd.js"></script>
<link href="/static/antd/dist/antd.css" rel="stylesheet"/>
在之前的dva做的项目中也有,可复制粘贴过来,路径在/dva-quickstart/node_modules/antd/dist...
3.写代码测试一下,html引入:
<div id="message1"></div>
<script type="text/babel" src="/static/components/button.js"></script>
antd组件代码:

// import { Button, Radio, Icon } from 'antd';
ReactDOM.render(
<div>
<antd.Button type="primary">Primary</antd.Button>
<antd.Button>Default</antd.Button>
<antd.Button type="dashed">Dashed</antd.Button>
<antd.Button type="danger">Danger</antd.Button>
</div>
, document.getElementById('message1'));

这需要注意的是,所有组件代码都可从官网中找到,但是import显然是起不到作用的,去掉就行了;
antd是一个对象,Button是其一个组建,引用的时候需要加上antd.才能正常使用。
antd引入普通html使用,将ant Design本地化的更多相关文章
- 将ant Design本地化,可通过link以及script直接引入html中使用
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...
- ant design pro (九)引入外部模块
一.概述 原文地址:https://pro.ant.design/docs/import-cn 除了 antd 组件以及脚手架内置的业务组件,有时我们还需要引入其他外部模块,这里以引入富文本组件 re ...
- 实战build-react(二)-------引入Ant Design
安装 Ant Design npm install antd --save 或 yarn add antd 注释:https://www.jianshu.com/p/21caf40ee93e(cop ...
- Ant design在vue,react的引入
文章地址: https://www.cnblogs.com/sandraryan/ 最近由于 一些不可描述的原因 要研究一下Ant design这个前端框架. 祭上官网: https://ant.de ...
- 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
- 测试平台系列(5) 引入Ant Design Pro
引入Ant Design Pro 回顾 还是继续回顾下之前的作业, 返回的中文变成了ascii字符,不要紧,我们光荣地百度一哈. 随便点进去看看,都可以找到正确答案: 可以看到,我们需要修改confi ...
- 实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- 在create-react-app里使用ant design
使用create-react-app创建的项目,要使用ant design. 1.首先进入项目根目录,yarn add antd. 2.在App.css引入 样式文件,@import '~antd/d ...
随机推荐
- ubuntu 12.04LTS下搭建Andriod开发环境记录
今天在Ubuntu 12.04 LTS 下安装了android开发环境. 1, 安装JDK 先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-7u4-linux-i586.tar.g ...
- 解决 GTK+/GNOME 3 环境下 Java Swing 程序使用本地 GTK+ 主题时菜单无边框 bug 的方法
在 GTK+/GNOME 3 环境下采用默认的 Adwaita 主题时,Java Swing 程序如果使用本地 GTK+ 主题会出现菜单无边框的 bug,这个问题也可能在其他常用的 GTK+ 主题中出 ...
- ASP.NET MVC 利用Razor引擎生成静态页
实现原理及步骤: 1.通过ViewEngines.Engines.FindView查找到对应的视图,如果是部分视图,则用:ViewEngines.Engines.FindPartialView: 2. ...
- Django性能调优
1.针对数据库的调优 程序对数据库的多次访问,会影响速度. 一般的流程是建立连接,获取或者修改数据,关闭连接.如果多次请求,导致多次建立连接会影响到速度. 解决办法有:1.延长连接时间并执行多次操作 ...
- POJ 3480 John [博弈之Nim 与 Anti-Nim]
Nim游戏:有n堆石子,每堆个数不一,两人依次捡石子,每次只能从一堆中至少捡一个.捡走最后一个石子胜. 先手胜负:将所有堆的石子数进行异或(xor),最后值为0则先手输,否则先手胜. ======== ...
- [TJOI2014] Alice and Bob
非常好的一道思维性题目,想了很久才想出来qwq(我好笨啊) 考虑a[]数组有什么用,首先可以yy出一些性质 (设num[i]为原来第i个位置的数是什么 , 因为题目说至少有一个排列可以满足a[],所以 ...
- golang实现dns域名解析(二)
上一节已经讲了如何构造dns请求包的情况,这一节接着上一节的情况,谈谈dns查询报文中的问题部分.问题部分中每个问题的格式如下: 查询名是要查找的名字,它是一个或者多个标识符的序列.每个标识符以首字母 ...
- ArcGIS 10.2 二次开发,兼容Visual Studio 2012二次开发,完美安装教程
GIS 经常安装是常有的事,每次重装系统都要浪费大半天去安装这个.所以凑这一次安装,把这个软件重新安装的步骤整理了一下,希望对大家有所帮助.这次整理的内容的关键优点是,对常见的出错内容进行了归纳整理. ...
- 【redis】redis实现API接口调用调用次数的限制
redis实现API接口调用调用次数的限制 参考地址:https://bbs.csdn.net/topics/391856106?page=1 参考地址:https://www.cnblogs.com ...
- MapWindowPoints
中文名 MapWindowPoints Windows CE 1.0及以上版本 头文件 winuser.h 库文件 user32.lib MapWindowPoints函数把相对于一个窗口的坐标空间的 ...