封裝一個超個性化的 Vue 框架

前言

用戶體驗升級版來了，如今，主題定製、頁面過渡、歷史頁籤，頁面緩存，側欄菜單，返回頂部，以及表格的邊框、文字過長省略、操做固定列、表頭固定、全屏頁面，不僅是開發人員的專屬，用戶也能夠在頁面中經過簡單的操做對頁面進行自定義配置，讓用戶更有歸屬感，炫起來的同時也能有一種這個就是專門爲他定製的感受。

這個框架可讓你更加專一於本身的業務，把與業務無關的操做抽離出來。我也只是對現有框架（基於 antd vue 組件庫）的二次封裝。前人種樹，後人乖涼，站在巨人的肩膀上，只是爲了走得更快，更強。

其實這個也不算得上是個框架，畢竟只是加了一些小功能，我作的只是錦上添花而已。

但必須說明的是，不是全部的項目都須要有這樣的功能，由於如今有不少網站也不是特別的青睞，但有了這些功能網站瞬間就高大尚起來，讓你更懂用戶，即便是用戶本身的個生化配置。

下面就是這個框架的所有內容展現，而前面所說的小功能就是右邊的【網站設置】功能，以及頁頭下方的 tab 歷史頁 籤。

項目在線DEMO：dormitory.yunkus.com

自定義項概覽

基本配置

1. 在線換膚
2. 自定義進入離開頁面的過渡效果
3. 歷史頁籤的顯示隱藏
4. 側欄菜單的收起展開
5. 返回頂部的功能開啓關閉

表格

1. 是否有邊框
2. 文字過長省略
3. 是否啓用操做列固定
4. 是滯啓用表頭固定

全屏

1. 全屏的開啓關閉

以上的這些配置，用戶配置了，會實時保存到狀態管理和本地緩存。只要緩存不被刪除，用戶本身的配置都會獲得保留。

網站配置的實現思路

用戶進行配置操做，自動把修改的配置保存到狀態管理（store），同時把 config 配置更新到本地緩存 。當頁面刷新（F5）時，會先從本地緩存中取出配置項，而後賦值給狀態管理，頁面中的相關配置從狀態管理統一拿值。

功能說明

換膚

主題色切換使用了 webpack-theme-color-replacer 模塊，這個模塊實現思路我以爲是比較好的。

npm 地址：www.npmjs.com/package/web…

思路一

藉助 less.js 的能力，在線實時生成樣式。

優勢：在線生成樣式，不生成多餘的樣式文件，同時也不會有樣式覆蓋問題。

缺點：因爲是在線生成整套樣式，因此會比較耗時，也佔用資源。

思路二

本地把全部主題都打包成一個一個的主題目錄，每一個目錄裏面存放一套完整的樣式，在線動態引入樣式表。

優勢：本地開發環境預生成，而非線上實時生成，一樣不會有樣式覆蓋問題。

缺點：生成多套主題文件，若沒有使用過換膚，這些文件至關無用文件。

思路三

webpack-theme-color-replacer 方式

優勢：不生成多餘的主題文件，相比第一種方法性能會更優一些，換膚時頁面的某些佈局不會出現抖動，只生成一個只與主題色有關的樣式文件，而後在線生成主題色系，再對主題色樣式文件進行替換。

缺點：即便只是針對存在主題色的類進行進行生成覆蓋處理，而且比第一種方法快，但也須要時間進行處理。並且咱們須要在 wepack 中對重複覆蓋的樣式進行處理，不過這個是一勞永逸的配置。

webpack-theme-color-replacer 的實現思路跟 less.js 的思路差很少，也是在線經過 js 來實現實時生成樣式，但 less.js 會簡單粗暴一點，生成一整套樣式。而 webpack-theme-color-replacer 正如它名字所體現的那樣，只針對顏色樣式進行覆蓋，這種方案，至關於前面兩種方法的折中實現。

爲何我我的以爲第三種方式比較好？理由以下：

1. 換膚功能不是經常使用功能
2. 換膚實時生成，即便須要等待程序動態生成，這個時間也是能接受，只要咱們給足了用戶等待反饋（loading 效果）
3. 換膚時頁面佈局不會產生抖動，如絲般順滑。

試想一下，若是一個不經常使用的功能，每次你一使用都會讓你有點不舒服，這樣的體驗確定是讓人失望的，即便是一些小小的細節。

但使用webpack-theme-color-replacer 方式也會存在一個顯示的問題：樣式覆蓋。

好比：

1. 按鈕若是是 type 爲 link 的時候，按鈕邊框是使用了 transparent 屬性值進行行覆蓋，而webpack-theme-color-replacer 插件是不會處理除了顏色以外的屬性的。
2. 白色相關的類也不會被處理。其實也不是說不能處理，咱們也能夠手動在主題色後追加白色值，但這樣會帶來更大的樣式錯亂。

而要想相對來講更好的解決上面的兩個問題，除了使用 changeSelector 回調外，咱們還能夠配合使用 resolveCss 回調，手動進行樣式覆蓋。

Todo：添加色盤工具（或者自定義色值），讓顏色儘量的多，選你所選，人人愛之不淺。

過渡效果

實現

vue transition 組件 + animate.css 動畫庫

說明

自定義進入離開頁面的過渡效果使用了 animate.css 動畫庫，全部的過渡動畫來自於 animate.css 庫。但這裏有一個問題，若是表格中的列表啓用了固定列功能，那麼有些 animate.css 過渡效果是會直接影響到 antd vue 組件庫對固定列高度的計算，會出現固定列高度異常的問題，目前尚未找到解決方法。

歷史頁籤

實現

狀態管理

說明

如今不少的後臺管理系統都會有這種交互，歷史頁籤可讓你更加方便的再次點開指定的菜單頁面。它的實現思路也很簡單，只要你點擊了側欄菜單，那麼這個菜單若是不在歷史頁籤就會自動推入歷史頁籤。這個功能能夠提升你處理事務的效率一點都不假，假設你的菜單不少，我這裏也不說太複雜的，舉一個簡單的例子：一個三級的菜單，很常見是吧，試想一下有這麼一個場景，你須要來回的在不一樣頂級菜單的二級三級菜單中進行來回切換，無數次的重複點開菜單，你的心情是否是感受到很無助。若是有了歷史頁籤，此時你直接點擊對應的頁籤就能夠切換到對應的菜單了，一次點擊直達目的地，何樂頁不爲呢。頁籤的做用其實就是把多級菜單平鋪顯示列出出來僅此而已。

歷史頁籤同時也對點擊頻率進行了記錄，實時對頁籤數據進行排序，使用頻率越高越靠後。

注意：雖然狀態是保存到了狀態管理中，但刷新頁面後數據也會被清空，這些能夠根據項目中的具體場景進行修改。

Todo: 歷史頁籤用戶可自定義排序（升序，降序）

表格

實現

基於 antd vue 組件庫的表格組件配合狀態管理

說明

正如前面說到的問題，若是啓用了表格的固定列，那麼頁面過渡效果中有些過渡效果對固定列的高度計算會產生負面影響（高度異常），這個直接影響到頁面的用戶體驗，那爲何我還在這裏把這些過渡效果都放進來呢？

首先，這裏是爲了說明過渡效果是能夠配合 animate.css 動畫庫實現炫麗的過渡效果。其次，若是頁面中沒有啓用固定列，那麼是不會有這個問題的，這裏也爲了儘量的展示 animate.css 的動畫魅力，做出一點點努力。

表格可操做項：表格的邊框、文字過長省略、操做固定列、表頭固定。

全屏

說明

這裏的全屏不是瀏覽器級別上的全屏，而是網站頁面級別上的全屏，即僅保留頁面的主要內容區域，但同時咱們也能夠選擇保留某些項。

Todo: 添加瀏覽器級別的全屏

其它

用戶鑑權

在項目根目錄下新建一個 permission.js 文件，裏面存放鑑權代碼。經過路由攔截實現鑑權。

Todo: 添加用戶過時自動清空本地登陸數據信息

資源加載 loading

在靜態資源加載完成以前（vue 可執行以前），會有資源加載 loading 動畫。若是有設置過網站皮膚的，那麼 loading 動畫會在設置完皮膚以後纔會消失。loading 的背景色也會隨着主題色的改變而改變。

返回頂部

能夠自定義返回頂部是否啓用，而且能夠設置滾動多大距離後才觸發顯示。

代碼篇

項目結構，代碼組織，組件封裝，我我的認爲這是項目中最主要的三個組成部分。後面會分別分享項目結構套路、代碼組織和組件封裝。

而且還會把複用性很強的一些經常使用的代碼封裝到 mixins 中，與組件封裝的目的同樣，好處包括但不限於：

1. 代碼複用性強
2. 可減小 bug 量
3. 提升開發效率
4. 保證了頁面代碼的簡潔

在這個二次封裝的框架裏：

1. 編輯（新增、修改）頁是在列表中以彈窗的方式實現的。因此這個彈窗的一些重複的場景實現能夠抽到 mxins 中

2. 列表頁也有些可複用的場景，因此也把共用代碼抽到 mixins 中（好比：新增，修改，刪除）

3. 列表搜索欄也進行了組件封裝

列表只須要定義接口及一些經常使用的屬性，引入列表對應的 mixins 文件，就能夠快速的完成一個列表頁的需求，

搜索欄其實也就那幾種，輸入框，下拉框，日期選擇等，把這些場景都裝到一個組件裏，在列表頁中都經過這個組件實現列表的搜索過濾，列表業務中只須要引入組件，設置數據就能夠了，經過數據驅動組件生成多個過濾條件。

代碼抽離複用，讓天下沒有難寫的代碼，讓一切變得垂手可得，沒有任何內心負擔（相同場景下的重複 bug），即便有也極可能只是未考慮到的場景，在 mixins 文件中完善就好，一次修復，終身受用。

至於具體的實現細節，會在下一篇文章中分享，點贊越多，文篇就會來得越快，畢竟個人動力來源來自於大家的默默點贊，評論和交流。