基於iview的后台管理

　　年前由於時間緊迫，原本使用iview技術開發后台管理系統的大神另有任務，我中途接手該項目，此前對於iview一無所知的我是一臉的懵逼，好在后台管理的整體框架大神已經搭建好了，而我之前對vue也有一定的了解，因此我只需要寫一些頁面以及數據的對接等。

　　中間踩過許多坑，遇到許多不接，最后在多番查詢資料以及大神的指導下，最后總算完成了這項艱巨的任務，在這段時間里，我也學到了許多東西。這里抽空整理一下。

 

　　既然是寫后台管理，那么首先要做的應該是環境的搭建，由於搭建環境中需要用到npm包管理工具，因此需要安裝nodejs（可以去 nodejs官網 下載）。

　　　　預覽下項目最終文件夾：

　　　　

　　

　　最終效果：　　

　　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

　　

　　執行完以上步驟，項目大致文件夾如下：

　　　　　　

 

　　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