随笔- 137 文章- 0 评论- 34 阅读- 97万

基于iview的后台管理

　　年前由于时间紧迫，原本使用iview技术开发后台管理系统的大神另有任务，我中途接手该项目，此前对于iview一无所知的我是一脸的懵逼，好在后台管理的整体框架大神已经搭建好了，而我之前对vue也有一定的了解，因此我只需要写一些页面以及数据的对接等。

　　中间踩过许多坑，遇到许多不接，最后在多番查询资料以及大神的指导下，最后总算完成了这项艰巨的任务，在这段时间里，我也学到了许多东西。这里抽空整理一下。

　　既然是写后台管理，那么首先要做的应该是环境的搭建，由于搭建环境中需要用到npm包管理工具，因此需要安装nodejs（可以去 nodejs官网下载）。

　　　　预览下项目最终文件夹：

　　最终效果：　　

　　1、全局安装vue-cli脚手架

1	`npm install -g vue-cli`

　　2、创建一个基于webpack模版的新项目。如：　　

1	`vue init webpack my-project （其中，my-project为项目名）`

　　3、打开项目，这里以my-project为例

1	`cd my-project`

　　4、安装项目相关依赖包（也可以使用cnpm来安装，速度更快，执行npm install -g cnpm --registry=https://registry.npm.taobao.org，然后就可以使用cnpm来替代npm了）。　　

1	`npm install`

　　执行完以上步骤，项目大致文件夹如下：

　　5、安装iview

1	`npm install iview --save`

　　6、在src/main.js文件中引入iview，引入后的main.js文件代码如下（红色部分为新加的部分）：

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
 
Vue.config.productionTip = false
Vue.use(iView) // 必不可少的
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

　　7、安装vuex。

　　由于应用中会遇到多个组件共享状态的情况，因此我们需要把组件的共享状态抽取出来，以一个全局单例模式管理，这时候就需要vuex了，说了这么多，那么什么是vuex呢？vuex是一个专门为vue.js设计的集中式状态管理架构，可以理解为在data中的属性需要共享给其他vue组件使用的部分。简单的说就是data中需要共用的属性。　

1	`npm install vuex --save （因为在生产环境中也要用到该包，所以--save别忘了）`

　　8、在src文件夹下新建store文件夹，并在新建文件夹下创建store.js文件，在文件中引入vue和vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

　　9、在iview中切换页面需要使用到路由，因此需要在src => router => index.js 中配置相关页面的路由，这里以上面最终的实现效果为例来进行配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import novelList from '@/components/novelList'
import hello from '@/components/hello'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [
        {
          path: '/hello',
          name: 'hello',
          component: hello
        }, {
          path: '/novelList',
          name: 'novelList',
          component: novelList
        }
      ]
    }
  ]
})

　　10、src/store/store.js文件配置如下：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        menus: [
            {
                'menuId': '1',
                'name': 'welcome',
                'subMenus': [
                    {
                        'menuId': '1-1',
                        'name': '欢迎',
                        'menuUrl': 'Hello'
                    }
                ]
            },
            {
                'menuId': '2',
                'name': '小说管理',
                'subMenus': [
                    {
                        'menuId': '2-1',
                        'name': '小说列表',
                        'menuUrl': 'novelList'
                    }
                ]
            }
        ]
    }
});

　　11、修改main.js文件，修改后如下（红色部分为新加的）：

import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
import store from './store/store'
 
Vue.config.productionTip = false
Vue.use(iView) // 必不可少的
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})