全局配置
# 全局开关，src/settings.js
module.exports = {
title: 'SO FAST',
/**
* @type {String}
* @description 主题
*/
theme: 'default',
/**
* @type {boolean} true | false
* @description 是否固定Header
*/
fixedHeader: false,
/**
* @type {boolean} true | false
* @description 是否显示菜单栏LOGO
*/
sidebarLogo: false,
/**
* @type {boolean} true | false
* @description 是否显示面包屑导航
*/
breadcrumb: true,
/**
* @type {boolean} true | false
* @description 是否显示头部检索
*/
headerSearch: true
}
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
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
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
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
# 开发环境，代理配置 vue.config.js
配置 devServer 中的 proxy
module.exports = {
devServer: {
// 端口
port: port,
// 启动后是否默认打开浏览器
open: true,
// 在浏览器上全屏显示编译的errors或warnings
overlay: {
warnings: false,
errors: true
},
// 代理配置
proxy: {
// 后端API代理
'/api': {
target: 'http://so-fast/stage-api',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
},
// 上传文件后，访问文件的代理
'/files': {
target: 'http://so-fast/files',
changeOrigin: true,
pathRewrite: {
'^/files': ''
}
}
}
}
}
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
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
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
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
# 主题配置
将 src/themes/default 文件夹 copy 一份，重命名为新的主题名称
sofast-web
├── src
│ └── themes
│ │ ├── default
│ │ │ ├── element-ui.scss
│ │ │ ├── index.scss
│ │ │ ├── variables.scss
│ │ ├── 新建目录
│ │ │ ├── element-ui.scss
│ │ │ ├── index.scss
│ │ │ ├── variables.scss
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
修改 src/settings.js 中的 theme 属性为创建的文件夹名称
然后修改 element-ui.scss 和 variables.scss 中的样式变量 注：element-ui.scss 中的所有变量皆为 Element 官方提供变量，variables.scss 为项目中自定义变量
可通过 Element-ui 官网的在线主题编辑器中进行编辑主题
https://element.eleme.cn/#/zh-CN/theme/preview 
对主题编辑后下载对应主题 Style 文件，目录结构如下
config.json
theme
├── fonts
│ ├── element-icons.ttf
│ └── element-icons.woff
└── index.css
1
2
3
4
5
6
2
3
4
5
6
1
2
3
4
5
6
2
3
4
5
6
此时只需关注 config.json，打开 config.json，并进行格式化
{
"global": {
"$--color-primary": "#647FB6"
},
"local": {
"$--alert-border-radius": "$--border-radius-small"
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
将变量对应的值 copy 到主题文件夹下的 index.scss 中替换样式变量 
完成
上次更新: 2025/04/23, 09:03:53