前言
date:2020-12-25
本身不是做前端的,但是偶尔也会自己做个小项目,相比vue更喜欢react。但是前端跟后端的用法差距有些大(可能是前端不够熟练吧),每次新建一个前端项目都要捣鼓好久。所以索性就记录一下步骤并搭建一个空项目。以后用的时候直接去github上拉就行了。
项目地址:react_template‘
在GitHub上上传了一个空项目。
除了必要的脚手架以外还添加了如下依赖:
- antd,各种定义好的组件
- axios, 处理异步请求
- react-router-dom,处理前端路由
- redux、react-redux、redux-saga处理状态
- react-app-rewired customize-cra babel-plugin-import,antd按需打包
下面讲述一下这个空项目是如何完成的:
步骤
下载依赖
npm install antd --save
npm install redux --save
npm install --save redux-saga
npm install --save react-redux
npm install --save react-router-dom
npm install axios
# 下面是按需打包插件
npm install react-app-rewired customize-cra babel-plugin-import
按需打包
上面代码块中最后一行是下载的按需打包的依赖,除了依赖还需要一些必要的设置
1. 配置config-overrides.js文件,该文件要放到项目根目录下.根目录是项目根目录,不是src下面
/**
* antd中有很多组件,我们不可能全部都使用,但是我们现在都引入了,在打包的时候应该按需进行打包,不能所有的都打包
*/
const {override, fixBabelImports} = require('customize-cra')
module.exports = override(
//针对antd实现按需打包,只会打包import中出现的组件
fixBabelImports('import',{
libraryName: 'antd', //针对antd库
libraryDirectory: 'es', //使用
style: 'css' //自动打包相关的样式
})
)
2. 替换package.json中的内容
//在 package.json中默认的启动编译脚本如下,也就是使用react-scripts进行启动、编译等命令
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
//现在修改为下面的方式
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
//其实可以看到,只是换了启动脚本。react-app-rewired对react-scripts进行了简单的封装,并加在了上面写的config-overrides.js文件
重置默认样式
1. 在public/css目录下新建文件reset.css。
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow-y:hidden; /* 加margin以后,页面会出现滚动条,加这句就不会了 */
overflow-x: hidden; /* 加margin以后,页面会出现滚动条,加这句就不会了 */
}
#root {
width: 100%;
height: 100%;
}
2. 在index.html中引用此样式
<link rel="stylesheet" type="text/css" href="/css/reset.css">
配置支持less并设置可以支持antd自定义主题
配置less文件
react模式是不支持less样式文件的,需要进行配置。网上大多都是说使用eject
命令将webpack.config.js
文件暴露出来的。但是我试了很多次都不生效。所以放弃了。(如果以后感兴趣可以百度搜:react less不生效就能搜到百度的方法)
这里介绍antd官网的一种方式。官网教程传送门。
项目根目录下安装依赖:
npm install @craco/craco
npm install craco-less
Package.json文件更改scripts
中的内容
//更改前
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
//更改后
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
根目录创建文件craco.config.js
并添加如下内容
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '@primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
将App.css
改为App.less
并在文件头部加入下面一行
@import '~antd/dist/antd.less';
以上就完成了使该项目支持less样式表文件,并可以支持自定义主题。
(本节2020-01-16更新)
*尚未解决的问题
1. 跨域问题。目前没有对跨域进行配置,如果要与后端对接接口需要自行配置。
以上配置改天有时间会添加上的。