将ant Design本地化,可通过link以及script直接引入html中使用
一直想着能本地化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.才能正常使用。
将ant Design本地化,可通过link以及script直接引入html中使用的更多相关文章
- antd引入普通html使用,将ant Design本地化
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...
- ant.design初探
第一部分: 前言 推荐网站: https://ant.design/docs/spec/introduce-cn ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计 ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
- Ant Design 使用小结
最近公司做了一个系统,因为页面涉及的表单交互非常多,如果使用之前的 Node + Express 的开发模式效率是非常低的,因此经过考虑,最后决定使用 Node + React 的开发模式,并且使用了 ...
- Ant Design 3.0 使用案例
代码地址如下:http://www.demodashi.com/demo/12309.html 本文适合对象 有过React使用经验. 有过webpack使用经验. 了解node. DEMO使用方式 ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- ant design pro (五)新增业务组件
一.概述 参看地址:https://pro.ant.design/docs/new-component-cn 对于一些可能被多处引用的功能模块,建议提炼成业务组件统一管理.这些组件一般有以下特征: 只 ...
- ant design pro (四)新增页面
一.概述 参看地址:https://pro.ant.design/docs/new-page-cn 这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进 ...
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...
随机推荐
- Android UiAutomator 快速调试
背景:在Eclipse中不能直接运行Uiautomator工程,所以每次编写一份用例都要进行手动输入命令,很烦.调试起来不仅繁琐还浪费时间.网上找到一份快速调试的代码UiAutomatorHelper ...
- flask 面试题
1,什么是Flask,有什么优点?概念解释Flask是一个Web框架,就是提供一个工具,库和技术来允许你构建一个Web应用程序.这个Web应用程序可以是一些Web页面,博客,wiki,基于Web的日里 ...
- extjs中store的reload事件异步问题解决
转载自:http://blog.sina.com.cn/s/blog_8f8b7fc10100zd75.html store0.reload({params:{start:0, limit:10}}) ...
- Git使用五:回到过去
reset:将仓库里面的内容恢复回暂存区,类似于从仓库里检出文件到暂存区checkout:将暂存区的文件恢复回工作区,即,把暂存区的文件检出到工作区 下面是之前三次提交的内容 三个区域的文件状态: 执 ...
- Java 获取图片的大小、宽、高
参考:https://www.cnblogs.com/hongten/archive/2012/11/26/hongten_java_ImageReader_BufferedImage.html im ...
- hdu 5183(Hash处理区间问题)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5183 题意:给出一个n个元素的数组,现在要求判断 a1-a2+a3-a4+.....+/-an 中是否 ...
- caffe调loss方法
正文 what should I do if... ...my loss diverges? (increases by order of magnitude, goes to inf. or NaN ...
- 一个页面中使用多个UEditor
如何在一个页面中使用多个Ueditor: 引入这些js: <script src="~/Scripts/ueditor/ueditor.config.js"></ ...
- Redis的过期策略和内存淘汰机制
过期策略 我们set key的时候,都可以给一个expire time,就是过期时间,指定这个key比如说只能存活1个小时,我们自己可以指定缓存到期就失效. 如果假设你设置一个一批key只能存活1个小 ...
- INFO JobScheduler: Added jobs for time 1524468752000 ms/INFO MemoryStore: Block input-0-1524469143000 stored as bytes in memory/完全分布式 ./bin/run-example streaming.NetworkWordCount localhost 9999无法正常运行
1.完全分布式 ./bin/run-example streaming.NetworkWordCount localhost 9999无法正常运行: 1 [hadoop@slaver1 spark- ...