将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实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...
随机推荐
- MongoDB的简单操作
一.简介 二.MongoDB基础知识 三.安装 四.基本数据类型 五.增删改查操作 六.可视化工具 七.pymongo 一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoD ...
- laravel 频率限制throttle
在 Laravel 5.6 中,还引入了频率限制功能.所谓频率限制,指的是在指定时间单个用户对某个路由的访问次数限制,该功能有两个使用场景,一个是在某些需要验证/认证的页面限制用户失败尝试次数,提高系 ...
- AI-CBV写法
AI-CBV写法 CBV固定样式 #url.py from django.conf.urls import url from django.contrib import admin from app0 ...
- 阿里云人脸识别测试接口出错 返回Body:{ "errno": 3002, "err_msg": "ILLEGAL_PARAMETERS", "request_id": "672cba83-cf93-4ef4-9ce5-d87e51601632" }
错误信息如下 返回Body:{ "errno": 3002, "err_msg": "ILLEGAL_PARAMETERS", ...... ...
- 滴水穿石-08IO
1.0 File a:构造方法 package d8; import java.io.File; public class FileGouZao { public static void main(S ...
- python删除列表元素
1.需求 num = [1,2,2,2,3,4,2,2,2,2,2,2,22,2]把列表中的有2的元素全部删除 2.编程代码 nums = [1,2,2,2,3,4,2,2,2, ...
- hive建表范例
建表范例:支持update和delete create table aaa( id string, visitor_name string ) clustered by(id) into bucket ...
- spring quartz整合实现定时器自动注解
1.web.xml中添加侦听器 <listener> <listener-class>org.springframework.web.context.ContextLoa ...
- SqlServer 分页存储过程
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE PROCEDURE [dbo].[usp_CommonDataResourcePaged ...
- Go语言之匿名函数
匿名函数和字面量函数一样, 凡是可以使用字面量函数的地方,都可以用匿名函数代替. 这个和js中的匿名函数差不多吧. package main import "fmt" var su ...