Vue 新手学习笔记：vue-element-admin 之零散配置修改

以你之姓@ 2023-06-17 12:56 55阅读 0赞

### Vue 新手学习笔记：vue-element-admin 之零散配置修改 ###

*  前言
 *  网页 Title 替换以及类似问题修改
 *   *  问题点
     *  修改
 *  面包屑修改，修改默认首页
 *   *  问题点
     *  修改
 *  修改个人中心处下拉列表
 *   *  问题点
     *  修改

# 前言 #

本文更像随笔，遇到框架中一些零散的配置修改在此记录，发现一个加一个

# 网页 Title 替换以及类似问题修改 #

## 问题点 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70]

## 修改 ##

可以直接搜索功能搜索修改  
![在这里插入图片描述][2019112909484541.png]  
对应文件：

*  /src/layout/components/Sidebar/Logo.vue
 *  /src/settings.js
 *  /src/utils/get-page-title.js
 *  项目根目录：vue.config.js

将文件种对用的 `Vue Element Admin` 改为自己的系统名称后重启服务即可

# 面包屑修改，修改默认首页 #

## 问题点 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 1]

## 修改 ##

> 文件路径：/src/components/Breadcrumb/index.vue

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 2]

修改后，如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 3]  
这里默认获取的是第一个路由，因此信息需与第一个路由保持一致，如果存在父子目录，则第一个路由就是父级目录，下面是我的路由配置，可做对比  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 4]

# 修改个人中心处下拉列表 #

## 问题点 ##

![在这里插入图片描述][20191129141815735.png]

## 修改 ##

> 文件路径：/src/layout/components/Navbar.vue

我这里改为 **当前用户名/个人中心/首页/退出登陆**，并且居中显示  
修改后下拉部分代码

<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
      <div class="avatar-wrapper">
        <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
        <i class="el-icon-caret-bottom" />
      </div>
      <el-dropdown-menu slot="dropdown">
        
        <el-dropdown-item style="display:block; text-align: center">
          <span>{
       { $store.getters.name }}</span>
        </el-dropdown-item>
        
        <router-link to="/profile/index">
          <el-dropdown-item style="display:block; text-align: center">
            {
       { $t('navbar.profile') }}
          </el-dropdown-item>
        </router-link>
        
        <router-link to="/">
          <el-dropdown-item style="display:block; text-align: center">
            {
       { $t('navbar.dashboard') }}
          </el-dropdown-item>
        </router-link>
        
        <el-dropdown-item divided style="display:block; text-align: center">
          <span style="display:block;" @click="logout">{
       { $t('navbar.logOut') }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

效果图  
![在这里插入图片描述][20191129143632250.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019112909473991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz,size_16,color_FFFFFF,t_70
[2019112909484541.png]: https://img-blog.csdnimg.cn/2019112909484541.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129115503394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129140343561.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191129141031987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191129141336256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MTQzNjcz,size_16,color_FFFFFF,t_70
[20191129141815735.png]: https://img-blog.csdnimg.cn/20191129141815735.png
[20191129143632250.png]: https://img-blog.csdnimg.cn/20191129143632250.png