将ant Design本地化,可通过link以及script直接引入html中使用
2017-03-23 14:17
239 查看
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合。下面是具体的实现方法:
1.将react的相关链接引入:
也可以用cdn的链接,我以及将react下到本地使用了,链接可能比较卡。
2.将antd引入,只需要下面这两个:
在之前的dva做的项目中也有,可复制粘贴过来,路径在/dva-quickstart/node_modules/antd/dist...
3.写代码测试一下,html引入:
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'));[/code]
这需要注意的是,所有组件代码都可从官网中找到,但是import显然是起不到作用的,去掉就行了;
antd是一个对象,Button是其一个组建,引用的时候需要加上antd.才能正常使用。
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组件代码:
// i[code]mport { 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'));[/code]
这需要注意的是,所有组件代码都可从官网中找到,但是import显然是起不到作用的,去掉就行了;
antd是一个对象,Button是其一个组建,引用的时候需要加上antd.才能正常使用。
相关文章推荐
- html的head里面的link 以及script连接的路径中有 ?以及以后的内容的含义。
- 为什么推荐使用npm安装Vue,而不是直接在HTML中引入vue.js
- gulp之文件合并以及整合html中的script和link
- 在html使用a标签 直接下载图片 不通过后台实现直接下载
- Struts里面<html:link>的使用方法以及加多个参数的方法
- html使用a标签不通过后台实现直接下载
- 安卓中引入第三方架包butterKnife的操作方法以及使用Intent创建选择窗口和通过handler发消息实时更新textview中的时间
- 关于我使用htmlparser,以及通过htmllparse下载网页中的图片
- 地磅称量系统之(37~39) 直接向数据库的数据表WtBill添加测试数据以及绑定用户控件和使用编码的方式控制dataGridView控件的每列属性和添加数据数据库的表中不存在的字段(非绑定列)
- 使用VIM可以直接把语法加亮的Source Code转换为HTML格式的页面!
- 不再使用临时文件,而是直接将html字符串读入webbrower中
- 如何通过使用 JScript 从某个 HTML 网页自动化 Excel
- 扩展老赵的 直接通过User Control生成HTML 分页功能
- 扩展老赵的 直接通过User Control生成HTML 分页功能
- html文件中标签的顺序以及使用ant的小TIPS
- (转)Struts -- html:link 标签的使用
- Flex中不使用FelxPrintJob通过ExternalInterface直接调用JavaScript利用浏览器本身的功能进行打印
- 使用VIM可以直接把语法加亮的Source Code转换为HTML格式的页面!
- (转)Struts -- html:link 标签的使用
- "方案改进:直接通过User Control生成HTML", 我的改进意见