element-ui后台管理系统学习(4)-分离全局配置文件

r囧r小猫 2021-08-02 12:45 250阅读 0赞

在项目中很多地方的基础信息是固定的，这个时候我们便可以进行**全局配置**。方法很简单，就是新建js文件，导出，挂在到Vue原型上面即可。代码如下：

**第1步：新建src/config/config.js。**

export default {
        logo:'element-admin',
        navBar: {
            active: "0",
            list: [
              {
                name: "首页",
                subActive: "0",
                submenu: [
                  { icon: "el-icon-s-home", name: "后台首页" },
                  { icon: "el-icon-s-claim", name: "商品列表" }
                ]
              },
              {
                name: "商品",
                subActive: "0",
                submenu: [{ icon: "el-icon-s-claim", name: "商品列表" }]
              },
              { name: "订单" },
              { name: "会员" },
              { name: "设置" }
            ]
          }
    }

**第2步：在main.js文件中引入config.js，并挂载到原型上面。**

// 引入全局配置文件
    import $conf from './common/config/config'
    Vue.prototype.$conf = $conf;

**第3步：数据绑定，前后对比。**

<a class="h5 text-light mb-0 mr-auto">element-admin</a>
    =>
    <a class="h5 text-light mb-0 mr-auto">{
       {$conf.logo}}</a>

**第4步：对于其中的数据，我们还可以在created中进行赋值处理。**

created() {
        //  初始化菜单
        this.navBar = this.$conf.navBar;
      },

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列七）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

柔光的暖阳◎/ 2022年09月06日 04:51/ 0 赞/ 187 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列五）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

分手后的思念是犯贱/ 2022年09月05日 15:56/ 0 赞/ 348 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列一）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

曾经终败给现在/ 2022年09月05日 15:55/ 0 赞/ 615 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列六）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

秒速五厘米/ 2022年09月04日 00:43/ 0 赞/ 528 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列五）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

亦凉/ 2022年09月03日 14:19/ 0 赞/ 327 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列四）

前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的

拼搏现实的明天。/ 2022年09月03日 12:11/ 0 赞/ 327 阅读

相关 Vue+ElementUI 搭建后台管理系统（实战系列二）

这是我参与8月更文挑战的第2天，活动详情查看： [8月更文挑战][8] 前言使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记

叁歲伎倆/ 2022年09月03日 04:15/ 0 赞/ 244 阅读

相关 vue后台管理系统开发完整开源代码基于elementUI

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

青旅半醒/ 2021年12月20日 11:19/ 0 赞/ 1013 阅读

相关 element-ui后台管理系统学习(4)-分离全局配置文件

在项目中很多地方的基础信息是固定的，这个时候我们便可以进行全局配置。方法很简单，就是新建js文件，导出，挂在到Vue原型上面即可。代码如下：第1步：新建src/conf

r囧r小猫/ 2021年08月02日 12:45/ 0 赞/ 251 阅读

相关 Vue+elementui的后台管理系统模板

功能: 1.三种表单模版:横向自适应,纵向单列,纵向双列 2.动态路由,动态菜单,路由和菜单均是由后端根据权限加载 3.提供了csdn同款富文本编辑器,支持直接将图...

朱雀/ 2020年04月27日 07:05/ 15 赞/ 7263 阅读