Skip to content

Commit 85cef33

Browse files
fxss5201fxss5201
committed
feat: ✨ 基本代码结构搭建
1 parent ff07768 commit 85cef33

36 files changed

+1975
-100
lines changed

‎.editorconfig

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js,jsx,ts,tsx,vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎.env

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
PORT=8000
2+
3+
# 配置axios请求
4+
REACT_APP_pathname=/vue-blog
5+
6+
# 配置列表页一页显示的文章个数
7+
REACT_APP_listLimit=10
8+
9+
# 网站名称，页脚也会使用
10+
REACT_APP_title=樊小书生
11+
12+
REACT_APP_host=https://www.fxss.work

‎.eslintrc.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "react-app"
3+
}

‎craco.config.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* craco.config.js */
2+
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
3+
const CracoLessPlugin = require('craco-less');
4+
const path = require('path')
5+
6+
const pathResolve = pathUrl => path.join(__dirname, pathUrl)
7+
8+
module.exports = {
9+
webpack: {
10+
alias: {
11+
'@': pathResolve('src')
12+
}
13+
},
14+
plugins: [
15+
{
16+
plugin: AntdDayjsWebpackPlugin,
17+
},
18+
{
19+
plugin: CracoLessPlugin,
20+
options: {
21+
lessLoaderOptions: {
22+
lessOptions: {
23+
// modifyVars: { '@primary-color': '#1DA57A' },
24+
javascriptEnabled: true,
25+
},
26+
},
27+
},
28+
},
29+
],
30+
};

‎jsconfig.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@/*": ["./src/*"]
6+
}
7+
}
8+
}

‎package.json

+38-7
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,35 @@
22
"name": "blog-react",
33
"version": "0.1.0",
44
"private": true,
5+
"scripts": {
6+
"start": "craco start",
7+
"build": "craco build",
8+
"test": "craco test",
9+
"analyze": "source-map-explorer build/static/js/main.*",
10+
"eject": "react-scripts eject"
11+
},
512
"dependencies": {
13+
"@craco/craco": "^5.6.4",
614
"@testing-library/jest-dom": "^4.2.4",
715
"@testing-library/react": "^9.3.2",
816
"@testing-library/user-event": "^7.1.2",
17+
"antd": "^4.6.4",
18+
"axios": "^0.20.0",
19+
"craco-less": "^1.17.0",
20+
"dayjs": "^1.8.35",
21+
"http-proxy-middleware": "^1.0.5",
22+
"husky": "^4.3.0",
23+
"lint-staged": "^10.4.0",
24+
"prettier": "^2.1.2",
925
"react": "^16.13.1",
1026
"react-dom": "^16.13.1",
11-
"react-scripts": "3.4.3"
12-
},
13-
"scripts": {
14-
"start": "react-scripts start",
15-
"build": "react-scripts build",
16-
"test": "react-scripts test",
17-
"eject": "react-scripts eject"
27+
"react-helmet": "^6.1.0",
28+
"react-redux": "^7.2.1",
29+
"react-router-dom": "^5.2.0",
30+
"react-scripts": "3.4.3",
31+
"redux": "^4.0.5",
32+
"redux-saga": "^1.1.3",
33+
"source-map-explorer": "^2.5.0"
1834
},
1935
"eslintConfig": {
2036
"extends": "react-app"
@@ -30,5 +46,20 @@
3046
"last 1 firefox version",
3147
"last 1 safari version"
3248
]
49+
},
50+
"devDependencies": {
51+
"antd-dayjs-webpack-plugin": "^1.0.1",
52+
"redux-devtools": "^3.7.0"
53+
},
54+
"husky": {
55+
"hooks": {
56+
"pre-commit": "lint-staged"
57+
}
58+
},
59+
"lint-staged": {
60+
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
61+
"prettier --single-quote --write",
62+
"git add"
63+
]
3364
}
3465
}

‎public/favicon.ico

1.11 KB
Binary file not shown.

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="zh_CN">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

‎src/App.css

-38
This file was deleted.

‎src/App.js

+6-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,13 @@
11
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
2+
import './App.less';
3+
import SecurityLayout from '@/layouts/SecurityLayout';
4+
import BasicLayout from '@/layouts/BasicLayout';
45

56
function App() {
67
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
8+
<SecurityLayout>
9+
<BasicLayout></BasicLayout>
10+
</SecurityLayout>
2311
);
2412
}
2513

‎src/App.less

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@import '~antd/dist/antd.less';
2+
3+
@border-color: #e6e6e6;
4+
// 小间距
5+
@s-spacing: 8px;
6+
// 中等间距
7+
@m-spacing: 16px;
8+
// 间距
9+
@spacing: 24px;
10+
11+
.flex {
12+
display: flex;
13+
align-items: center;
14+
}
15+
16+
.clearfix {
17+
&::before,
18+
&::after {
19+
display: table;
20+
content: "";
21+
}
22+
&::after {
23+
clear: both;
24+
}
25+
}

‎src/assets/img/logo.jpg

14.5 KB
Loading

‎src/components/ArticleList/ArticleList.jsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
3+
import './ArticleList.less';
4+
5+
function ArticleList(props) {
6+
console.log(props);
7+
return <div className="header-logo_text">樊小书生</div>;
8+
}
9+
10+
export default ArticleList;

‎src/components/ArticleList/ArticleList.less

Whitespace-only changes.

‎src/components/ArticleListItem/ArticleListItem.jsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
import './ArticleListItem.less';
5+
6+
function ArticleListItem(props) {
7+
return <div className="header-logo_text">樊小书生</div>;
8+
}
9+
10+
export default ArticleListItem;

‎src/components/ArticleListItem/ArticleListItem.less

Whitespace-only changes.

‎src/components/ArticleScreen/ArticleScreen.jsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { Checkbox, Select } from 'antd';
3+
import './ArticleScreen.less';
4+
5+
const { Option } = Select;
6+
7+
function ArticleScreen(props) {
8+
return (
9+
<div className="article-screen-box">
10+
<div className="article-screen__left">
11+
<Checkbox checked={props.checked} onChange={props.onCheckboxChange}>
12+
仅看原创
13+
</Checkbox>
14+
</div>
15+
<div className="article-screen__right">
16+
<div className="">文章排序：</div>
17+
<Select
18+
defaultValue="0"
19+
style={{ width: 217 }}
20+
onChange={props.onSelectChange}
21+
>
22+
<Option value="0">默认</Option>
23+
<Option value="1">按访问量</Option>
24+
<Option value="2">按点赞数</Option>
25+
</Select>
26+
</div>
27+
</div>
28+
);
29+
}
30+
31+
export default ArticleScreen;

‎src/components/ArticleScreen/ArticleScreen.less

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import '@/App.less';
2+
3+
.article-screen-box {
4+
padding: @m-spacing @spacing;
5+
border-bottom: 1px solid @border-color;
6+
.clearfix();
7+
.article-screen__left {
8+
float: left;
9+
padding: 6px 0;
10+
}
11+
.article-screen__right {
12+
float: right;
13+
.flex();
14+
}
15+
}

‎src/components/BasicHeader/BasicHeader.jsx

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
import { Menu } from 'antd';
4+
import logo from '@/assets/img/logo.jpg';
5+
import routes from '@/router/index';
6+
// const { SubMenu } = Menu;
7+
8+
import './BasicHeader.less';
9+
10+
function HeaderLogo(props) {
11+
return (
12+
<Link to="/" className="header-logo">
13+
<img src={logo} alt="logo" className="header-logo_logo" />
14+
<div className="header-logo_text">{process.env.REACT_APP_title}</div>
15+
</Link>
16+
);
17+
}
18+
19+
class BasicHeader extends React.Component {
20+
constructor(props) {
21+
super(props);
22+
this.state = {};
23+
}
24+
25+
render() {
26+
const menuItems = routes.map((item) => (
27+
<Menu.Item key={item.path}>
28+
<Link to={item.path}>{item.name}</Link>
29+
</Menu.Item>
30+
));
31+
return (
32+
<div className="header-box">
33+
<HeaderLogo></HeaderLogo>
34+
<Menu
35+
mode="horizontal"
36+
theme="light"
37+
selectedKeys={[this.props.match.url]}
38+
className="header-nav"
39+
>
40+
{menuItems}
41+
</Menu>
42+
</div>
43+
);
44+
}
45+
}
46+
47+
export default BasicHeader;

‎src/components/BasicHeader/BasicHeader.less

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@import '@/App.less';
2+
3+
.header-box {
4+
min-width: 1100px;
5+
.clearfix();
6+
7+
.header-logo {
8+
float: left;
9+
height: 66px;
10+
.flex();
11+
cursor: pointer;
12+
13+
.header-logo_logo {
14+
margin-right: 16px;
15+
width: 34px;
16+
height: 34px;
17+
border-radius: 50%;
18+
}
19+
20+
.header-logo_text {
21+
color: #333;
22+
font-size: 18px;
23+
font-weight: 700;
24+
}
25+
}
26+
27+
.header-nav {
28+
float: right;
29+
}
30+
}

0 commit comments

Comments
 (0)