系列教程《一步步帶你做vue后台管理框架》第一課
github地址：vue-framework-wz
線上體驗地址：立即體驗
Features 特性
- 👍wz腳手架👍（腳手架助你安裝/卸載組件更方便）
- 工業化UI組件（上手即用，無需自己造輪子）
- 自適應布局（完美適配大中小屏）
- 👉多TAB導航（應廣大朋友們的業務需求）
登錄/注銷權限驗證Tinymce 編輯器Markdown 編輯器動態側邊欄（支持多級路由）- 面包屑導航
- JSON展示組件
- echartjs圖表
- 404錯誤頁面
- 表格數據直接導出cvs
多環境發布- mock數據
- 炫酷hover特效
在如今的科技公司中有很多前端的需求都是要寫一個類似於后台管理框架
例如：騰訊雲這樣的
亦或是七牛雲這樣的
還是Talkdata這樣的
發現了有什么相同之處嗎？都是側邊欄+頭部欄+主頁面。
這樣的項目用vue+vue-router 來開發真是再得心應手不過了。
大廠人多不怕累，但是對於我們苦逼的小程序員或者初學者來說，每一個需求或者換一家公司就要重做一個項目，架構什么都要重新寫？
日常的工作中會有太多重復的內容加重我們程序員的工作，浪費我們的時間，導致不能早點下班回家吃飯。
普通程序員拿到一個項目總是會重新寫，寫路由花了兩小時，寫vuex花了兩小時，寫個Header組件花了1小時，側邊欄又要1小時，這樣下來項目拿到手一天的時間都沒真正去做項目的需求，再加上改bug，寫css，准備工作都要花三四天，等到產品過來催，還沒有真正去實現功能。這樣是極大的浪費時間。
那么我們怎么才能成為一個高效率的程序員呢?
成功的秘籍就在於需要有一個自己的后台管理框架，當你拿到一個項目，所有的UI組件、路由、狀態管理、登錄鑒權功能、等等都已經寫好，你只需要去復用代碼再加上少量的邏輯，當你一個小時做完准備工作，出去買杯咖啡回來看到你的同事還在苦逼的寫vue路由，你肯定會會心一笑：“框架在手，天下我有”。
表格是我們工作中最常見的組件。就拿寫一個表格來舉例吧
高下立判。傳統寫一個表格需要大量重復html，且需要自己寫css，自己定義數據渲染方式。效率低下且質量不高，而我們的框架已經定義好表格組件，只需要把注意力放在數據獲取上，工作瞬間輕松了很多。
再來看下wz框架表格組件在實際應用中的強大之處吧。
我們的框架已經定義好表格組件，上手即用，是不是又美觀又簡單好用啊。
不止表格，我們還有各種你工作中會遇到的組件，輕松完成工作中出現的復雜需求。
UI組件已經有了，我們的框架還有哪些特性呢？
多TAB導航！
很多朋友說沒有多TAB導航怎么敢稱為后台管理系統呢。也有一些朋友在工作中遇到了這樣的需求。
深感需求緊急的我連夜趕出了多TAB導航。
更是支持動態側邊欄，自動判斷去往的頁面的路由。
自適應!!!
現在很多vue框架都沒有自適應功能，而很多使用場景也在手機上會有，這也是wz后台管理框架誕生的原因之一。
想想要自己每次做自適應就頭疼，現在有了wz框架老板再也不用擔心我的界面適配問題了。
我們看下效果：
是不是很棒！wz框架基於超好用的開源UI iview，采用了row和col的思想，Row為一行，Col為一列，配置Col 的sm md lg 等屬性就可以做到自適應。
代碼如下例
<Row> <Col :md="8" :sm="12" :lg="9"> </Col> </Row>
還有什么令人激動的特性呢？
莫過於登錄鑒權功能了！
產品要做登錄功能你把希望寄托於后端，后端不背鍋把鍋甩你身上？求人不如求己，wz框架已經替你封裝好登錄鑒權，只需發送服務端驗證一下用戶名密碼即可。
來看下我們炫酷的登錄界面
炫酷狂拽吊炸天是不是。
原理就是登錄的時候輸入密碼存到cookie里，可以由個人選擇加密方式，每次在路由跳轉的時候利用router.beforeEach((to, from, next) 判斷是否有token，如果有，發送到服務端驗證，如果通過，就繼續路由，如果沒有，就重定向到登錄界面。
鑒權也是一樣的道理，在router配置中加上 meta: { role: ['Administrator'] }，在router.beforeEach（）中判斷要去的那個界面是否需要權限。並且側邊欄是根據可訪問的路由動態生成的，不同級別的用戶可以看到的側邊欄是不一樣的，這就在一定程度上做到了簡單的權限管理的功能。
可以看一下這端代碼，就是登錄鑒權的核心。
router.beforeEach((to, from, next) => {
// console.log(to)
NProgress.start(); // 開啟Progress
if (store.getters.token) { // 判斷是否有token
// alert('dont need login ');
if (to.path === '/login') {
next({ path: '/' });
}
else {//如果不是去login 而是其他需要判定權限的
// console.log(store.getters.roles)
if (store.getters.roles.length === 0) { // 如果當前用戶沒有拉取完user_info信息
store.dispatch('GetInfo').then(res => { // 拉取user_info
const roles = res.data.role;
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
// console.log(store.getters.addRouters);
next({ ...to }); // hack方法 確保addRoutes已完成
})
})
} else {
// 沒有動態改變權限的需求可直接next() 刪除下方權限判斷 ↓
if (hasPermission(store.getters.roles, to.meta.role)) {
// console.log(to.meta.role)
// console.log("has permission");
next();//
} else {
// console.log("has no permission");
next({ path: '/', query: { noGoBack: true } });
}
// 可刪 ↑
}
}
} else {
if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單，直接進入
next()
} else {
alert('please login');
next('/login'); // 否則全部重定向到登錄頁
NProgress.done(); // 在hash模式下 改變手動改變hash 重定向回來 不會觸發afterEach 暫時hack方案 ps：history模式下無問題，可刪除該行！
}
}
});
說完特性，我們再來看看框架的目錄結構。
build和config是webpack的配置文件，src中存放着框架的主要文件，api是已經封裝好的api請求，components是我們的UI組件。mock是便於我們前端調試的一個工具，可以截獲http請求，返回數據，從而做到獨立於后端開發，加快我們的開發進度，當我們需要請求服務器的時候要把這個文件夾刪掉。
我們需要新加頁面就在views里面加上新的界面文件，然后在router里配置好路由就可以正常訪問了。
當我們需要提交頁面放到服務器上也很簡單，運行
npm run build:prod
項目目錄下就會多出一個dist文件夾，里面有index.html文件和static文件夾，放在服務器上就行。不需要在服務器上安裝任何環境，甚至不需要node即可。
再也不用為發布項目操心了。
├── build // 構建相關 ├── config // 配置相關 ├── src // 源代碼 │ ├── api // 所有請求 │ ├── components // 全局UI組件 │ ├── directives // 全局指令 │ ├── mock // mock數據 │ ├── router // 路由 │ ├── store // 全局store管理 │ ├── utils // 全局公用方法 │ ├── containers // 自適應布局組合 │ ├── vendor // UI組件依賴js │ ├── views // views界面 │ │ ├── charts //圖表組件 │ │ ├── components //首頁組件 │ │ ├── login //登錄界面 │ │ ├── pages //錯誤界面 │ │ └── permission //權限測試界面 │ ├── App.vue // 入口頁面 │ └── main.js // 入口 加載組件 初始化等 ├── static // 靜態資源 │ ├── bower_components //七牛SDK │ ├── css //css │ ├── js //js │ └── Jquery.min.js // jq ├── .babelrc // babel-loader 配置 ├── eslintrc.js // eslint 配置項 ├── .gitignore // git 忽略項 ├── favicon.ico // favicon圖標 ├── index.html // html模板 └── package.json // package.json
關於框架的介紹就基本是這些了，wz框架的特點就在於自適應、登錄鑒權、封裝好UI組件、簡單易上手、穩定高效。
希望大家多多使用，多多宣傳。
后續教程會盡快出，下節課講下怎么上手使用。
大家有什么問題最好去我github提issues，文章評論評論較長時間才查看一次。
接下來的教程講一下封裝UI組件、router、webpack、node命令行構建工具等內容。
希望大家看了這系列教程都能制作出自己的前端框架，從而在工作中得心應手。
如果喜歡就點個start鼓勵下作者吧。
github地址：vue-framework-wz
線上體驗地址：立即體驗