vue-element-admin配置小结

我会详细地讲解一下“vue-element-admin配置小结”的完整攻略。

1. 安装

vue-element-admin 是基于Vue.js2.0和Element-ui的后台管理系统的解决方案。要使用它，首先需要安装Node.js、npm或yarn等基本前端开发环境。

安装方式：

# 使用npm
$ npm install -g vue-cli
$ npm install
$ npm run dev

# 使用yarn
$ yarn global add vue-cli
$ yarn
$ yarn dev

2. 配置

在 vue-element-admin 的使用过程中，我们常常需要对一些配置进行修改以满足具体的需求。

2.1 修改端口号

默认情况下，vue-element-admin 的端口号为8080，可以在config/index.js中进行修改。

module.exports = {
  dev: {
    // 设置端口号
    port: 8888,
    ...
  },
  ...
}

2.2 去除eslint检查

在某些情况下，我们需要禁用eslint检查，可以在config/index.js文件中进行配置。

module.exports = {
  ...
  rules: [
    ...
    {
      test: /\.(js|vue)$/,
      loader: 'eslint-loader',
      enforce: 'pre',
      include: [resolve('src'), resolve('test')],
      options: {
        // 关闭ESLint
        formatter: require('eslint-friendly-formatter'),
        emitWarning: !config.dev.showEslintErrorsInOverlay
      }
    }
  ]
}

将上面的options选项中的emitWarning改为false即可。

3. 示例说明

3.1 示例1：修改背景色

vue-element-admin默认的背景色为白色，我们可以修改为其他的颜色。

修改方式：

在src/styles/variables.scss中添加以下代码：

$body-bg: #f5f5f5;

PS：$body-bg指代整个页面的背景色，也可以只修改其他元素的背景色。

3.2 示例2：隐藏面包屑

在vue-element-admin中，默认是显示面包屑导航的，如果我们想要将它隐藏起来，可以采取以下步骤：

1. 修改src/layout/components/Sidebar.vue文件，在上面添加一个v-if的条件语句。

<el-breadcrumb v-if="!collapsed"></el-breadcrumb>

1. 修改src/layout/components/AppMain.vue文件，将面包屑的部分代码部分删去（也就是el-breadcrumb标签的内容）。

<div class="app-main__content">
  <transition name="fade-spread">
    <div v-if="!collapsed" style="margin-top:10px">
      <slot></slot>
    </div>
    // 这里只保留了slot标签
  </transition>
</div>

这样做后，就可以将vue-element-admin页面中的面包屑导航隐藏起来了。

通过上面这些配置和示例，相信你已经能够成功地使用vue-element-admin搭建自己的后台管理系统了！