基于iview的后台管理

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

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

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

　　　　预览下项目最终文件夹：

　　　　基于iview的后台管理

　　最终效果：　　基于iview的后台管理

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

npm install -g vue-cli

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

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

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

cd my-project

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

npm install

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

　　　　　　基于iview的后台管理

　　5、安装iview

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中需要共用的属性。　

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/>'
})

　　12、别忘了新建HelloWorld.vue、hello.vue、novelList.vue文件。

　　最后就可以执行npm run dev，然后在浏览器中输入http://localhost:808来运行项目了，端口号默认为8080，可以在config文件夹下的index.js文件中修改端口号和ip

　　　　基于iview的后台管理

基于iview的后台管理

相关推荐