一直想着能本地化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. Java测试的题目感想

    日期:2018.9.24 星期一 博客期:012 说起来测试真的是来的时候信心满满,考完的时候慌得出神!我感觉自己会用Scanner类做输出和文件操作就可以在有限时间内把它搞出来了!事实证明我错了!我 ...

  2. 断路器Ribbon

    断路器:就是对服务访问不到的情况做出自己的错误,也就是故障转移(将当前出现故障的请求重新返回特定消息) 改造消费者项目(RibbonDemo) 1.在pom.xml中引入hystrix的jar包 &l ...

  3. map函数和reduce函数的区别

    ①从参数方面来讲:map()函数: map()包含两个参数,第一个是参数是一个函数,第二个是序列(列表或元组).其中,函数(即map的第一个参数位置的函数)可以接收一个或多个参数.reduce()函数 ...

  4. Python基础之面向对象的软件开发思路

    当我们来到生产环境中的时候,对一个软件需要开发的时候,刚开始也可能会懵逼,挝耳挠腮.不知从何下手,其 实,大家也不要苦恼,这是大多数程序员都会遇到的问题.那么,我们就要想一想了,既然大家都会这样,到低 ...

  5. Python中的xxx == xx是否等价于xxx is xxx

    先上代码: >>> a = 1 >>> b = 1 >>> a is b True >>> a == b True what? ...

  6. Django的Session存储Redis环境配置

    第一步:在项目目录下的settings.py中MIDDLEWARE中加上中间件: # session中间件Django项目默认启用Session 'django.contrib.sessions.mi ...

  7. 金蝶k3密码批量修改

    该字段含有单引号,直接使用查询语句,需要转义其中的单引号.select * from t_User where FSID = ') F ", ,P T #8 *P!D &D 80!N ...

  8. 磁盘修改AF

    请严格按照如下流程: 1 以管理员打开 硬盘安装助手 2 选择苹果Mac系统镜像 (cdr格式的) 3 直接选择要写入的盘,不要点击右边的方框中的勾选 (此时就可以写入了,虽然最后还是显示 Chang ...

  9. 函数函数sigaction、signal

    函数函数sigaction 1. 函数sigaction原型: int sigaction(int signum, const struct sigaction *act, struct sigact ...

  10. 一脸懵逼学习HBase的搭建(注意HBase的版本)

    1:Hdfs分布式文件系统存的文件,文件存储. 2:Hbase是存储的数据,海量数据存储,作用是缓存的数据,将缓存的数据满后写入到Hdfs中. 3:hbase集群中的角色: ().一个或者多个主节点, ...