將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.才能正常使用。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 antd引入普通html使用,將ant Design本地化 html直接引入vue.js 在html中直接引入less文件 關於在html中直接引入less文件遇到的小問題 vue中使用ant design Ant-design中使用jQuery 關於在HTML中使用的script標簽 vue 如何引入 ant design 【安裝】Vue( 直接使用