将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.才能正常使用。
将ant Design本地化,可通过link以及script直接引入html中使用的更多相关文章
- antd引入普通html使用,将ant Design本地化
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...
- ant.design初探
第一部分: 前言 推荐网站: https://ant.design/docs/spec/introduce-cn ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计 ...
- ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
- Ant Design 使用小结
最近公司做了一个系统,因为页面涉及的表单交互非常多,如果使用之前的 Node + Express 的开发模式效率是非常低的,因此经过考虑,最后决定使用 Node + React 的开发模式,并且使用了 ...
- Ant Design 3.0 使用案例
代码地址如下:http://www.demodashi.com/demo/12309.html 本文适合对象 有过React使用经验. 有过webpack使用经验. 了解node. DEMO使用方式 ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- ant design pro (五)新增业务组件
一.概述 参看地址:https://pro.ant.design/docs/new-component-cn 对于一些可能被多处引用的功能模块,建议提炼成业务组件统一管理.这些组件一般有以下特征: 只 ...
- ant design pro (四)新增页面
一.概述 参看地址:https://pro.ant.design/docs/new-page-cn 这里的『页面』指配置了路由,能够通过链接直接访问的模块,要新建一个页面,通常只需要在脚手架的基础上进 ...
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...
随机推荐
- Java测试的题目感想
日期:2018.9.24 星期一 博客期:012 说起来测试真的是来的时候信心满满,考完的时候慌得出神!我感觉自己会用Scanner类做输出和文件操作就可以在有限时间内把它搞出来了!事实证明我错了!我 ...
- json的转换操作
toJSON 把JS对象{ 'x': 2, 'y': 3 }转为JSON对象格式的字符串 不能转化字符串 比如"{ 'x': 2, 'y': 3 }" 可以转格式不标准的jso ...
- LeetCode(90):子集 II
Medium! 题目描述: 给定一个可能包含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: [1,2,2] 输出: [ [2], [1 ...
- bzoj 5418
这是拓展crt的典型应用 在你开始做之前,我一定要告诉你一件事情:虽然这道题看着和拓展crt模板很像,但他俩是有巨大的区别的!不要直接把板子改吧改吧扔上去! 题目模型:求解模线性方程组 其中p1,p2 ...
- ajax之阴影效果实现(对象函数方法)
shadow.js文件内容jQuery.fn.shadow = function () { //获取到每个已封装的元素 //this表示jQuery对象 this.each(function () { ...
- 多版本python安装第三方库
1.先进入对应版本的python 2.使用命令安装:./pip install xxx
- 优先选择nullptr而不是0和NULL
我们知道:0是一个int,而不是一个指针.如果C++在一个只有指针才能够使用的上下文中发现它只有一个0,那么它会勉强将0解释成空指针,但那时一种倒退行为.C++的主要方针是0就是一个int,而不是指针 ...
- 论文阅读笔记九:SEMANTIC IMAGE SEGMENTATION WITH DEEP CONVOLUTIONAL NETS AND FULLY CONNECTED CRFS (DeepLabv1)(CVPR2014)
论文链接:https://arxiv.org/abs/1412.7062 摘要 该文将DCNN与概率模型结合进行语义分割,并指出DCNN的最后一层feature map不足以进行准确的语义分割,DCN ...
- jdbc问题:Access denied for user ''@'localhost''是因为没输入账户和密码
Access denied for user ''@'localhost' to database 'bjpowernode'
- Scrapy库的安装(windows版)
这个是需要安装的所有文件 1. wheel pip install wheel 2. lxml http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 3. P ...