iview admin 使用爬坑

前言

前段时间公司需要开发一个后台管理系统，时间比较急迫，一两天时间。想一想自己一点一点的做起来可能性不太大，就想着有没有现成的可以改一改，就找到了基于Vue.js和iview组件库的现成后台，iview admin。

使用

iview admin 的使用非常简单，安装依赖，运行项目即可。

# 安装依赖
npm install

# 运行项目
npm run dev

问题

在使用过程中遇到了几个问题：

1. 菜单栏点击无反应

   这个问题是由于没有正确配置路由。在 router.js 文件中，需要正确配置路由规则。

export default [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'dashboard',
        component: Dashboard,
      },
      {
        path: 'user',
        component: User,
      },
    ],
  },
];

2. 表格数据不显示

   这个问题是由于没有正确配置数据源。在 store.js 文件中，需要正确配置数据源。

export default new Vuex.Store({
  state: {
    tableData: [],
  },
  mutations: {
    setTableData(state, data) {
      state.tableData = data;
    },
  },
  actions: {
    fetchTableData({ commit }) {
      axios.get('api/table').then(res => {
        commit('setTableData', res.data);
      });
    },
  },
});

3. 弹出框无法正常显示

   这个问题是由于没有正确配置弹出框的样式。在 main.js 文件中，需要正确配置弹出框的样式。

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    dark: true,
  },
});

解决方法

上面提到的问题，都可以通过修改代码来解决。具体修改方法如下：

1. 菜单栏点击无反应

   修改 router.js 文件，正确配置路由规则。

export default [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'dashboard',
        component: Dashboard,
      },
      {
        path: 'user',
        component: User,
      },
    ],
  },
];

2. 表格数据不显示

   修改 store.js 文件，正确配置数据源。

export default new Vuex.Store({
  state: {
    tableData: [],
  },
  mutations: {
    setTableData(state, data) {
      state.tableData = data;
    },
  },
  actions: {
    fetchTableData({ commit }) {
      axios.get('api/table').then(res => {
        commit('setTableData', res.data);
      });
    },
  },
});

3. 弹出框无法正常显示

   修改 main.js 文件，正确配置弹出框的样式。

import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    dark: true,
  },
});

总结

iview admin 是一个非常不错的后台管理系统，使用起来非常方便。但是，在使用过程中也遇到了一些问题。通过修改代码，可以解决这些问题。