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

  1. antd引入普通html使用,将ant Design本地化

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

  2. ant.design初探

    第一部分: 前言 推荐网站: https://ant.design/docs/spec/introduce-cn ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计 ...

  3. ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】

    一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...

  4. Ant Design 使用小结

    最近公司做了一个系统,因为页面涉及的表单交互非常多,如果使用之前的 Node + Express 的开发模式效率是非常低的,因此经过考虑,最后决定使用 Node + React 的开发模式,并且使用了 ...

  5. Ant Design 3.0 使用案例

    代码地址如下:http://www.demodashi.com/demo/12309.html 本文适合对象 有过React使用经验. 有过webpack使用经验. 了解node. DEMO使用方式 ...

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

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

  7. ant design pro (五)新增业务组件

    一.概述 参看地址:https://pro.ant.design/docs/new-component-cn 对于一些可能被多处引用的功能模块,建议提炼成业务组件统一管理.这些组件一般有以下特征: 只 ...

  8. ant design pro (四)新增页面

    一.概述 参看地址:https://pro.ant.design/docs/new-page-cn 这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进 ...

  9. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

随机推荐

  1. mongo 的导入和导出

    1.导出工具:mongoexport     1.概念:         mongoDB中的mongoexport工具可以把一个collection导出成JSON格式或CSV格式的文件.可以通过参数指 ...

  2. day11 函数的位置形参,位置实参,可变长位置形参,关键字形参

    今天内容 函数的参数详解 形参与实参 形参及形式参数,就是在定义函数是括号中指定的参数(本质就是一个名字) 实参及实际参数,指的是在调用函数是传入的参数)(本质就是一个值) 在调用函数是就会把形参和实 ...

  3. day10 函数2

    为什么需要函数? 先使用目前的知识点实现一个需求: """ 三个功能   1.登录   2.购物车   3.收藏夹       收藏夹和 购物车 需要先登录才能使用!   ...

  4. sql查询条件为空的另类写法o( ̄▽ ̄)d

    简单描述:今天看老大提交的代码,发现了一个有意思的事情,一条sql中判断条件是空,老大的写法,让我眼前一亮.直接上代码 代码: <select id="getxxxs" re ...

  5. java 命令行JDBC连接Mysql

    环境:Windows10 + java8 + mysql 8.0.15 + mysql-connector-java-8.0.15.jar mysql驱动程序目录 项目目录 代码: //package ...

  6. PDF文件如何标注,怎么使用PDF标注工具

    我们在使用文件的时候需要给文件的部分添加标注,能够更加直观的了解文件,但是有很多小伙伴们对于PDF文件怎么添加标注都不知道,也不知道PDF标注工具要怎么使用,那么下面就跟大家分享一下怎么使用PDF标注 ...

  7. Linux基础二:初识linux命令

    一.UNIX和Linux操作系统概述 1.UNIX是什么 1)UNIX的定义: UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序. 2)UNIX操作系统的特点:多用 ...

  8. easyui合并多个单元格

    $('#table-v2').datagrid({ url: './data/am/data1_table.json', pagination: true, //显示分页 fit: true, //d ...

  9. Java+selenium之WebDriver模拟鼠标键盘操作(六)

    org.openqa.selenium.interactions.Actions类,主要定义了一些模拟用户的鼠标mouse,键盘keyboard操作.对于这些操作,使用 perform()方法进行执行 ...

  10. C#学习-类的成员

    定义完类之后,还需在类中定义成员. 类的成员包括字段.属性.方法和构造函数等,它们与类一样,也都有自己的访问权限.以下是 public,同一个程序集或引用该程序集的其他程序集都可以访问 private ...