一直想着能本地化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本地化的更多相关文章

  1. 将ant Design本地化,可通过link以及script直接引入html中使用

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

  2. ant design pro (九)引入外部模块

    一.概述 原文地址:https://pro.ant.design/docs/import-cn 除了 antd 组件以及脚手架内置的业务组件,有时我们还需要引入其他外部模块,这里以引入富文本组件 re ...

  3. 实战build-react(二)-------引入Ant Design

    安装 Ant Design  npm install antd --save 或 yarn add antd 注释:https://www.jianshu.com/p/21caf40ee93e(cop ...

  4. Ant design在vue,react的引入

    文章地址: https://www.cnblogs.com/sandraryan/ 最近由于 一些不可描述的原因 要研究一下Ant design这个前端框架. 祭上官网: https://ant.de ...

  5. 十九、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 ...

  6. 测试平台系列(5) 引入Ant Design Pro

    引入Ant Design Pro 回顾 还是继续回顾下之前的作业, 返回的中文变成了ascii字符,不要紧,我们光荣地百度一哈. 随便点进去看看,都可以找到正确答案: 可以看到,我们需要修改confi ...

  7. 实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

  8. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  9. 在create-react-app里使用ant design

    使用create-react-app创建的项目,要使用ant design. 1.首先进入项目根目录,yarn add antd. 2.在App.css引入 样式文件,@import '~antd/d ...

随机推荐

  1. 安装聊天软件telegram-cli

    Telegram是一款加密通信的聊天软件,可以在linux,windows,android,chrome等运行.官方网址:https://telegram.org/ 它是有桌面版的,但作为一个linu ...

  2. Scala不使用null 而使用Option,None,Some的好处

    刚接触Scala时就很奇怪, 为什么Java已经有null了,却偏偏还要弄出个None 后来依然我行我素在Scala里使用null, 结果就是经常被NullPointerException折磨得阴魂不 ...

  3. mysql error 1093 解决办法

    mysql> select * from t; +----+ | id | +----+ | 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 ...

  4. Python Challenge 第九关

    第九关只有一幅图,上面有一些黑点.网页名字叫:connect the dots.可能是要把这些点连起来. 查看源代码,果然有两个整数集合 first 和 second.并且有个提示:first+sec ...

  5. (17)python Beautiful Soup 4.6

    一.安装 1.登陆官网:https://www.crummy.com/software/BeautifulSoup/ 2.下载 3.解压 4.安装 cmd找到文件路径,运行 setup.py buil ...

  6. Java 的几种版本

    1. Java ME Java ME(Java 2 Micro Edition),是为机顶盒.移动电话和PDA之类嵌入式消费电子设备提供的Java语言平台,包括虚拟机和一系列标准化的Java API. ...

  7. eclipse中mybatis generator插件的安装与使用,实现自动生成代码

    git地址:https://github.com/mybatis/generator 下载后解压: 选择任意一个版本的jar放到eclipse的features目录下即可 选择任意一个版本的jar放到 ...

  8. Working With Push Buttons In Oracle Forms

    Managing push buttons at run time in Oracle Forms is very simple and in this tutorial you will learn ...

  9. Ambient Occulution

    SSAO HDAO normal pair 求一个谷 SAO 重建normal HBAO input depth,normal 这几个都是screen space的ao

  10. GCC编译笔记

    需要移植一个vs2008的项目到linux上,代码比较复杂,重新写比较困难,于是开始折腾 首先移植到codeblocks上,sprints_s这类的vs函数都要改,windows调用要改 编译通过 c ...