element-admin 个性化配置

配置页面布局

修改 src\settings.js

1
2
3
4
5
{
    title: 'Vue Admin Template', //网站标题
    fixedHeader: true, //是否固定标题
    sidebarLogo: true  //是否在侧边栏中显示 Logo
}

修改 src\layout\components\Sidebar\Logo.vue

1
2
3
4
{
    title: 'Vue Admin Template',
    logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
}

配置默认语言为中文

修改 src\main.js

1
2
3
import locale from "element-ui/lib/locale/lang/en"; // lang i18n
// 改为
import locale from "element-ui/lib/locale/lang/zh-CN"; // lang i18n

导航头像样式调整

修改 src\layout\components\Navbar.vue

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
// 1. 头像触发下拉方式改为hover // 去掉 trigger="click" // 2.
去掉下拉按钮的箭头，并替换头像
<!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar"> -->
<!-- <i class="el-icon-caret-bottom" /> -->
<el-avatar
  :size="35"
  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
  >系统管理员</el-avatar
>

// 3. 下拉选项
<el-dropdown-item icon="el-icon-user-solid"> 系统管理员 </el-dropdown-item>
<router-link to="/">
  <el-dropdown-item icon="el-icon-house"> Home </el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
  <el-dropdown-item icon="el-icon-eleme">Github</el-dropdown-item>
</a>
<a
  target="_blank"
  href="https://panjiachen.github.io/vue-element-admin-site/#/"
>
  <el-dropdown-item icon="el-icon-eleme">Docs</el-dropdown-item>
</a>
<el-dropdown-item icon="el-icon-switch-button" divided @click.native="logout">
  退出
</el-dropdown-item>

src\styles\element-ui.scss

1
2
3
4
5
6
7
8
9
10
// dropdown
.el-dropdown-menu {
  top: 45px !important;
  a {
    display: block;
  }
  li {
    width: 150px;
  }
}

配置侧边栏

修改 src\layout\components\Sidebar\index.vue

1
2
// 手风琴样式，永远只展开一个
:unique-opened="true"

中间区域样式调整

修改 src\layout\components\AppMain.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}
/* 改为 */
.app-main {
  /*50 = navbar  */
  min-height: 100vh; /* calc(100vh - 50px); */
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #e7e8eb;
}

src\styles\index.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// main-container global css
.app-container {
  margin: 10px;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: white;
}

.app-wrapper-form .app-container {
  width: 1200px;
  margin: 15px auto;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: white;
}