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

react样式模块化的"omit -loader"坑 众所周知 react样式的模块化(css modules) 是自己模块中写自己的css,与其他模块互补影响,解决了命名冲突和全局污染的问题. 在使用css modules时,需要先配webpack.config  但是在配的时候,出现了这样的问题(前提是已经加载css-loader和style-loader) 在这里我的css-loader是0.28.7 style-loader是0.19.0 看看自己的package文件的load

第七节时提到,上传文件时实际可能需要传输一个token. 1.查看vue antdesign文档https://vue.ant.design/components/upload-cn/ 2.使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 3.定义customRequest,之前定义action行为会被覆盖,可以注释掉 4.customRequet代码如下 customRequest (data) { const fo

文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size / 1024 / 1024 > rules ? reject() : resolve() }).then( () => { return true }, () => { this.$message.error(`文件大小不能超过 ${rules} MB`) return Promise.r

自定义上传组件,只需要在内部的值变化之后调用props中的onChange方法就可以托管在From组件中, 此外为了保证,初始化值发生变化后组件也发生变化,需要检测initialValue 变化,这是定义了 checkInitialValue 方法,在render的时候调用 import React from 'react'; import { Upload, message, Button, Icon } from 'antd'; import { upload, search } from

最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后将打包文件缩小到665kb,效果十分显著,网上有许多解决办法,大多对新手都不是很友好,涉及到的知识点十分的多,导致一步一坑,虽然这边文章不是最好的,但通过如下的调试缩小其打包文件. 项目github连接 :https://github.com/2016Messi/webpack3-react-rou

这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 第三篇:优化单页面开发环境:webpack与react的运行时打包与热更新 第四篇:React配合Webpack实现代码分割与异步加载 本文内容将记录使用webpack.babel.react.antdesign配置单页面应用开发环境的过程.这是我首次使用前端框架开发Web应

最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页......) PC_git Mobile_git create-react-app myApp yarn add antd        // 安装到生产依赖 在 index.js 中 import "antd/dist/antd.min.css" 会打包全部文件 import React,

最近有个需求是新闻时间排序与点击量排序,数据库中存储的新闻是按照时间顺序排序的,从后台数据中取出数据,在前端进行页面展示即可. 我用到了ant-design中的Tabs切换页,样式大概如下图. 其实这个项目里面最令我欣喜的是reducer中间件的封装,无需通过fetch请求数据这些,而是使用另外的封装中间件的方式 当然在store里面有引用redux-thunk 项目首先是使用了三种请求方式 在中间件中使用这三种方式,并且封装了callApi 我们将方法写在action中,callAPI就是我们

第一步安装ant-design插件 第二步查看项目目录 第三步运行项目 我们查看index.js文件 这个其实是Datepicker组件的展示效果 第四步我们按照下面的代码代替Index.js中的内容 我们用到了两个组件,一个是Message.info,一个是Datepicker 查看效果图 Message.info还可以写上消失的时间,比如50ms Message.info("点击成功",50) react中的setState就是一个很大的状态机,我们很多的数据都会在state中声明

在使用ant-design的upload上传文件时,前端很好实现,那么我们如何实现node服务端呢? 服务端文件上传实现 var express = require('express'); var fs = require('fs'); var path = require('path'); var multipart = require('connect-multiparty'); var router = express.Router(); /* GET App home page. */

1.下载Node.js Node.js的版本需要不低于V4.x,本不在省略,如果需要出门左转Node.js安装教程. 查看Node.js版本: C:\Users\Administrator>node --version v8.9.1 2.安装antd 使用npm install antd-init -g 安装antd,因为npm安装插件是从国外服务器下载,受网络影响比较大,可能出现异常.可以使用cnpm安装: 2.1用npm安装 cnpm npm install cnpm -g --regist

在学习ant-desin过程中,发现很多知识都不清楚,从现在开始,每天将自己学习到的知识进行一个总结记录,前端大佬勿扰勿喷.先介绍几个基础概念和一些常用命令: 1.什么是脚手架 我们经常在各个博客论坛下看到脚手架这个名词,那什么是脚手架呢.看到很多前辈们的说法之后,脚手架就相当于预定义的一套模板环境,后续的项目开发可以直接应用这套环境,不用再重复的去搭建. 脚手架”是一种元编程的方法,用于构建基于数据库的应用.许多MVC框架都有运用这种思想.程序员编写一份specification(规格说明书)

一.Ant-Design学习 因为Ant-Design是基于React实现的,之前自己也学过一段时间的React,对React还是相对比较熟悉的,在学习Ant-Design也还不算吃力. 最开始是从源码看起,从最简单的Icon组件看的,然后连续看了几个组件就有点吃不消了,哈哈哈.所以就改为实战了. 在Ant-Design官网上有一个Ant-Design快速上手的教程https://ant.design/docs/react/practical-projects-cn,可以跟着它学习一下,你可以从

ant-design给我们提供的图标不够怎么办呢?答案是我们可以自定义图标. 自定义图标也挺简单的,现在图标推荐用svg格式,那么我们就需要制作svg图片. 下面让我们看看如果制作svg图片吧. 1.百度搜索svg在线编辑器 2.打开https://c.runoob.com/more/svgeditor/ 3.在右侧调整好canvas宽高,使之和图片宽高相同 4.点击文件->导入图片 5.点击视图->源代码,就可以看到生成的源代码了 6.去掉无用代码,光留下svg和image标签即可 7.自定

首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api中文文档     ant-design 中文文档 本人也是第一次接触react,对本教程如疑问,欢迎评论 或 发送至 15521285778@163.com 交流 1,全局安装Create React App , 创建项目 Create React App 是开始构建新的 React 单页应用程序的最佳方

本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm i babel-plugin-import -D 安装一个babel插件用于做组件的按需加载(否则项目会打包整个组件库,非常大) 根目录下新建.roadhogrc文件(别忘了前面的点,这是roadhog工具的配置文件,下面的代码用于加载上一个命令安装的import插件),写入: { "extraBa

最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少走一些弯路. 安装依赖 yarn add xlsx //或 npm install xlsx 项目中引入 import * as XLSX from 'xlsx'; 上传组件(antdesign的上传组件) <Dragger name="file" accept={this.stat

其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用exclude将node_module目录下的文件排除,网上有很多相关例子,但不知是不是因为时间久远,都不生效,无奈,又只好啃回官方文档,我的解决方式如下 webpack正常打包的话,所有的css都会被打包在一起,造成css的全局污染,我们可以采用模块化的方式,其实就是借用hash改变类或id名 webpack.config.js module: { rules: [ { test: /\.(js|jsx)$/

AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="vertical" hideRequiredMark> <a-row> <a-col :span="8"> <a-form-item label="用户名"> <a-input v-decorator="

最近学习AntDesign组件使用,官方Pro例子集成度太高,不容易学习,将从最基础组件一个一个搭建. 1.创建Vue Cli项目 2.引入ant design组件 $ cnpm i --save ant-design-vue 3.安装组件babel-plugin-import 4.修改babelrc文件 cnpm install babel-plugin-import --dev 5.mainjs中引用button组件 6.Vue组件中添加按钮 7.实际效果