element-ui後臺管理系統學習(4)-分離全局配置文件

在項目中很多地方的基礎信息是固定的，這個時候我們便可以進行全局配置。方法很簡單，就是新建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;
  },