使用vue2.0 + vue-router + vuex + element-ui實現的後臺管理系統

有登陸註冊（含登陸狀態管理），角色權限管理，表格分頁，圖表顯示等。

登陸帳號有三個，分別是：admin,supplier,buyers；密碼所有是：123456 。三個帳號也是三個不一樣的角色，分別是：管理員，供貨商，採購商。三種不一樣角色的登陸會進入不一樣的界面，同時三種不一樣角色登錄後沒法互相訪問別的角色的界面。

詳細實現教程，完整源碼以及在線演示的地址：

使用vue2.0 + vue-router + vuex + element-ui實現的後臺管理系統

初始化項目

全局安裝 vue-cli

npm install --global vue-cli

新建一個文件夾works，使用終端進入該文件夾，輸入下面的命令：

vue init webpack vueyiyao

此時建立了一個基於 webpack 模板的新項目，繼續輸入：

cd vueyiyao
# 安裝依賴
npm install
# 啓動本地服務器
npm run dev

此時瀏覽器將打開vue的歡迎頁面，也就是基於 webpack 模板的項目頁面

安裝須要的依賴包

在vueyiyao目錄下，使用終端運行以下命令：

# 安裝element-ui（基於vue的UI框架）
npm i element-ui -S
# 安裝axios(AJAX與後臺交互數據)
npm install axios -s
# 安裝vuex（基於vue的狀態管理模式）
npm install vuex -S
# 安裝echarts（圖表顯示）
npm install echarts --save

依賴簡介：
element-ui是一套採用 Vue 2.0 做爲基礎框架實現的組件庫，它面向企業級的後臺應用，可以幫助你快速地搭建網站，極大地減小研發的人力與時間成本。

axios是一個基於 promise 的 HTTP 庫，主要是AJAX功能。

vuex是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

ECharts，一個純 Javascript 的圖表庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。

貼兩張圖片出來，更多界面和功能請直接進行在線演示發掘。