Appearance
文件配置
使用一个框架，首先熟悉他的项目文件结构，废话不多说，开始往下讲解。
.
├─ config webpack配置信息 文件夹
├─ public 静态公共资源 文件夹
├─ scripts 启动配置项 文件夹
├─ src 源码 文件夹
├─ .editorconfig 编辑配置文件 文件
├─ .env-cmdrc.js 启动env变量预设 文件
├─ .gitignore git忽略配置文件 文件
├─ color.js 主题色脚本文件 文件
├─ LICENSE 项目开源协议 文件
├─ README.md 使用文档 文件
└─ package.json 包管理文件 文件
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
env 变量预设.env-cmdrc.js
const devConfig = {
PORT: 3000, // 启动端口
HOST: "0.0.0.0", // 监听地址
NODE_ENV: "development", // 开发者模式
REACT_APP_ROUTERBASE: "/react-ant-admin", // react路由基础路径
REACT_APP_API_BASEURL: "http://127.0.0.1:8081/api/react-ant-admin", //请求地址
PUBLIC_URL: "/react-ant-admin", // 静态文件路径
};
const productionCfg = {
REACT_APP_ROUTERBASE: "/react-ant-admin", // react路由基础路径
REACT_APP_API_BASEURL: "/api/react-ant-admin", //请求地址
PUBLIC_URL: "/react-ant-admin", // 静态文件路径
NODE_ENV: "production", // 打包模式 生产模式
BUILD_PATH: "react-ant-admin", // 打包 文件夹名称
};
module.exports = Promise.resolve({
// 本地接口正常运行 没有mock 没有 主题色
development: devConfig,
// 本地接口 启用主题色运行
development_color: {
...devConfig,
COLOR: "true", // "true" 为 启动
},
// 本地mock 运行
development_mock: {
...devConfig,
REACT_APP_MOCK: "1", // 1 为开启mock
},
// 主题色 和 本地mock 运行
development_color_mock: {
...devConfig,
COLOR: "true",
REACT_APP_MOCK: "1",
},
// 打包 ：无主题 无mock
production: productionCfg,
// 打包 ： 有主题 无mock
production_color: {
...productionCfg,
COLOR: "true", // "true" 为 启动
},
// 打包 ： 有主题 有mock 纯本地模式打包
production_color_mock: {
...productionCfg,
COLOR: "true",
REACT_APP_MOCK: "1",
},
// GitHub pages 打包 博主使用
production_github: {
...productionCfg,
COLOR: "true",
REACT_APP_API_BASEURL: "https://azhengpersonalblog.top/api/react-ant-admin",
REACT_APP_ROUTER_ISHASH: "1", // 启用哈希模式
REACT_APP_ROUTERBASE: "/",
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
这里的 env 变量预设是用env-cmd脚本启动项目。所以通过此文件可以高效自定义 env 变量在项目中使用。以下预设变量是本项目中用到的。
- 开发模式(dev)
const dev = {
PORT: 3000, // 项目启动端口
HOST: "0.0.0.0", // 项目监听地址
NODE_ENV: "development", // 开发者模式
REACT_APP_ROUTERBASE: "/react-ant-admin", // react路由基础路径
REACT_APP_API_BASEURL: "http://127.0.0.1:8081/api/react-ant-admin", //api请求基础地址
PUBLIC_URL: "/react-ant-admin", // 静态文件路径 启动时 默认以 localhost:3000
REACT_APP_ROUTER_ISHASH: "1", // 不存在 或者 不为 1 使用 history 模式 反之 启用 hash 模式
COLOR: "true", // 不存在 或者 不为 true 不启用主题色 反之 启用
REACT_APP_MOCK: "1", // 不存在 或者 不为 1 不启用mock本地模式 反之 启用
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 打包模式(production)
const pro = {
REACT_APP_ROUTERBASE: "/react-ant-admin",
REACT_APP_API_BASEURL: "/api/react-ant-admin",
PUBLIC_URL: "/react-ant-admin",
NODE_ENV: "production",
BUILD_PATH: "react-ant-admin", // 打包文件路径名
REACT_APP_MOCK: "1",
COLOR: "true",
REACT_APP_ROUTER_ISHASH: "1",
};
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
src 文件夹
src
├─ api
│ └─ index.js 网络API接口文件
│
├─ asset 静态文件资源
│
├─ common 配置信息
│ ├─ index.js 主要信息配置文件
│ └─ ajax.js 网络请求库配置文件
│
├─ components 自定义组件库
│
├─ layout 项目页面布局
│ ├─ mode 布局模式文件夹
│ ├─ footer.js 项目页面底部布局
│ ├─ header.js 项目页面头部布局
│ ├─ index.js 项目页面主题布局
│ ├─ index.less 布局样式
│ ├─ siderMenu.js 项目页面侧边栏菜单布局
│ └─ topMenu.js 项目页面顶部栏菜单布局
│
├─ mock
│ └─ index.js 本地模拟数据文件
│
├─ pages 项目页面文件夹
│
├─ router 项目路由文件夹
│ ├─ appRouter.js 项目App主要路由
│ ├─ index.js 项目页面信息，菜单信息组成渲染
│ ├─ intercept.js 路由权限拦截文件
│ └─ list.js 页面路由列表
│
├─ store redux全局数据管理
│ ├─ layout 关于布局模式
│ ├─ menu 关于菜单
│ ├─ user 关于用户
│ ├─ visibel 关于用户显示
│ └─ index.js 入口文件
│
├─ utils 工具库
├─ App.js 项目渲染主入口
├─ index.js 项目启动主入口
└─ setupProxy.js 跨域转发配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43