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

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

1.将react的相关连接引入:html

<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下到本地使用了,连接可能比较卡。node

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

<script src="/static/antd/dist/antd.js"></script>
<link href="/static/antd/dist/antd.css" rel="stylesheet"/>

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

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

<div id="message1"></div>
<script type="text/babel" src="/static/components/button.js"></script>

antd组件代码:flask

// i
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'));mport { Button, Radio, Icon } from 'antd';

这须要注意的是,全部组件代码均可从官网中找到,可是import显然是起不到做用的,去掉就好了;babel

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

相关文章
相关标签/搜索