react 后台(一) react + redux + react-route + webpack+ axios + antd + less
create-react-app 项目名称(项目失败,ant 的样式出不来)
项目技术栈
react + redux + react-route + webpack+ axios + less + antd
使用create-react-app 创建的项目默认不支持less,以下增加less配置的步骤
暴露配置文件
create-react-app生成的项目文,看不到webpack相关的配置文件,需要先暴露出来,使用如下命令即可:
npm run eject
安装less-loader 和 less
npm install less-loader less --save-dev yarn less-loader less//这个执行不行
此时没有webpack.config.js文件,然后执行npm run eject暴露webpack.config.js文件,在config文件夹里(此操作不可逆)
运行后如果无法启动,执行 npm install
老版修改方式
修改webpack配置
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件
改动1: /\.css$/ 改为 /\.(css|less)$/,, 修改后如下: exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
改动2: test: /\.css$/ 改为 /\.(css|less)$/
新版修改方式
config文件此目录 webpack.config.js
1
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
改为
// style files regexes
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
2
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{
增加代码
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
,
{
loader: require.resolve('less-loader'),
options: cssOptions,
},
先验证less是否可以
import './app.less';
如果antd引入的组件还是不展示样式
在引入的页面添加
import 'antd/dist/antd.css';
刷新就能看到样式了
如果想实现按需加载antd,需要引入
yarn add babel-plugin-import
修改 package.json,添加下面代码就可以去掉 import 'antd/dist/antd.css'; 了
"babel": {
"presets": [
"react-app"
],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
在或者接着添加 customize-cra
yarn add customize-cra
创建文件 config-overrides.js
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
然后重启运行
yarn add antd
yarn add axios
yarn add react-redux
yarn add react-router
yarn add react-router-dom
yarn add redux-immutable
yarn add react-router-redux
yarn add redux
yarn add redux-actions
yarn add redux-mock-store
yarn add redux-thunk
yarn add immutable
yarn add echarts
yarn add md5
yarn add rc-queue-anim
yarn add rc-tween-one
yarn add prop-types
如果会用的日期要再引入一个模块,用来格式化日期的
yarn add moment
如果有跨域请求
yarn add fetch-jsonp
import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import querystring from 'querystring'; const { Option } = Select; let timeout;
let currentValue; function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value; function fake() {
const str = querystring.encode({
code: 'utf-8',
q: value,
});
//这里
jsonp(`https://suggest.taobao.com/sug?${str}`)
.then(response => response.json())
.then(d => {
if (currentValue === value) {
const { result } = d;
const data = [];
result.forEach(r => {
data.push({
value: r[0],
text: r[0],
});
});
callback(data);
}
});
} timeout = setTimeout(fake, 300);
} class SearchInput extends React.Component {
state = {
data: [],
value: undefined,
}; handleSearch = value => {
fetch(value, data => this.setState({ data }));
}; handleChange = value => {
this.setState({ value });
}; render() {
const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
return (
<Select
showSearch
value={this.state.value}
placeholder={this.props.placeholder}
style={this.props.style}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={this.handleSearch}
onChange={this.handleChange}
notFoundContent={null}
>
{options}
</Select>
);
}
} ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);
react 后台(一) react + redux + react-route + webpack+ axios + antd + less的更多相关文章
- react 后台(一)react + redux + react-route + webpack+ axios + antd+styled-components(替代less)
create-react-app my-admin 项目技术栈 react + redux + react-route + webpack+ axios + antd+styled-component ...
- Redux React & Online Video Tutorials
Redux React & Online Video Tutorials https://scrimba.com/@xgqfrms https://scrimba.com/c/cEwvKNud ...
- Flux --> Redux --> Redux React 入门
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- Flux --> Redux --> Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- Flux --> Redux --> Redux React 入门 基础实例使用
本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- 在react项目中使用redux or mobx?
主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...
随机推荐
- Django入门(上)
一.Web应用程序 1.web应用程序介绍 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. 应用程序有两种模式 ...
- shell习题第25题:判断是否开启web服务
[题目要求] 写一个脚本判断我的linux服务器是否开启web服务?监听80端口 [核心要点] netstat -lntp | grep '80' [脚本] #!/bin/bash n=`netsta ...
- 监听lsnrctl status查询状态报错linux error 111:connection refused
报错现象 今天给客户一个单实例环境配置监听,创建正常,查询状态异常报错 tns tns tns linux error :connection refused 匹配MOS Starting TNS L ...
- 设置阿里云镜像仓库并安装Docker
echo "设置阿里云镜像仓库" mkdir /etc/yum.repos.d/bak && mv /etc/yum.repos.d/*.repo /etc/yum ...
- (一)XML基础(1)
一.什么是XML? XML是指可扩展标记语言(eXtensible MarkupLanguage),它是一种标记语言.它被设计的宗旨是描述数据(XML),而非显示数据(HTML). 目前遵循的是W3C ...
- Java MergeSort
Java MergeSort /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternational ...
- iis7 运行多个https,433端口监听多个htps 站点
默认情况一个服务器的IIS只能绑定一个HTTPS也就是443端口,现在有需要一个服务器 iis 433 端口 绑定多个 申请到证书后(不是必须要通配符的证书),添加多个https站点,先绑定别的端口 ...
- 转:让PIP源使用国内镜像,提升下载速度和安装成功率
转载,自己记录使用,原文http://www.cnblogs.com/microman/p/6107879.html 对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太 ...
- java计算接口调用时间
方法一: LocalDateTime beginTime = LocalDateTime.now(); Long opetime = Duration.between(between,LocalDat ...
- Orion (system-on-a-chip)
From Wikipedia: Orion is a system-on-a-chip manufactured by Marvell Technology Group and used in n ...