為Vue2集成UIkit

引言：Vue只是為我們提供了一個很優(yōu)秀的前端組件式開發(fā)框架，但單純依靠Vue是做不出一個漂亮的網(wǎng)頁應用的，甚至連“不難看”這個標準都達不到。這個時候借助界面框架UIkit能夠很好地解決這一問題。
本文出自《Vue2實踐揭秘》一書。

　　在實際開發(fā)中，還有很多常用組件，例如，分頁、按鈕、輸入框、導航欄、日期/時間選擇器、圖片輸入，等等。很明顯的是這些組件的通用性已不單單存在于一個項目內(nèi)，而是所有的項目都需要！這是個比拼開發(fā)速度的年代，我們已經(jīng)沒有時間重復發(fā)明輪子了，最正確的選擇是使用界面框架，例如Bootstrap、UIkit、Foundation等來代替這種大量的重復性極強的界面樣式開發(fā)工作。

UIkit

　　Bootstrap已經(jīng)有很多年歷史了，在業(yè)界的應用也相當普遍，無論是前端開發(fā)或者后端開發(fā)，為了能快速做一個不算太難看的界面，它自然成為眾多工程師的選擇，包括我。多年下來，Bookstrap的改進實在是太緩慢了。不客氣地說，它基本上就沒讓我們這些用戶感覺它改進過，同質(zhì)化嚴重，功能性組件一直不見增加，等等，都讓我們只能是痛并用著。
　　UIkit給我們帶來了福音，無論從界面上的樣式，還是實用組件的數(shù)目，甚至到易用性來說都要比Bootstrap好上一個層次。唯一的缺陷是它出生得比較晚，可選的主題樣式資源不多，畢竟還需要時間讓第三方社區(qū)來推動發(fā)展。但用它來做一個漂亮的交互性強的應用絕對是一個最佳的推薦方案。
　　Vue社區(qū)上也有一些包裝UIkit的庫，如vuikit，但它的文檔實在太少了，甚至從一開始的安裝配套都做得非常差，基本上是脫離了UIkit的核心樣式包和核心腳本編寫的。雖然努力可嘉，但這種功能性復制的包建議還是不要用，前端最耗不起的就是編譯包的大小。每個引入的第三方包我們都得吝嗇地測算一下得失，即使webpack可以用chuck來分包，但也不能濫用，否則加載速度緩慢就是破壞使用體驗的最大因素。

安裝

　　雖然在AngularJS、React和Vue的項目中jQuery從來都是一個不受歡迎的庫。首先是它編譯出來后就非常大，而且影響我們的MVVM思維，容易因為圖方便而又回到jQuery那種直接操控DOM的死路上去。但jQuery的強大在于它的普及性，幾乎我們能找到的很多優(yōu)秀小組件都會有jQuery版本，甚至只有jQuery的版本。而UIkit正是其中一員，不能抗拒的話也只能學會享受。我們得同時安裝jQuery、UIkit兩個庫：

$ npm i jquery uikit -D

配置

　　我們需要將jQuery和UIkit的引用以及一些字體的引用配置添加到webpack中（UIkit內(nèi)置引用了Fontawesome字體庫），確保已安裝了url-loader這個庫，如果沒有安裝的話用以下指令進行安裝：

$ npm i url-loader --D

　　在webpack.config.js的module.rules配置中加入字體引用配置：

rules: [
    // ... 省略
    {        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,        loader: 'url',        query: {            limit: 10000,            name: '[name].[hash:7].[ext]'
        }
    }
]

　　當然，如果你采用vue-cli webpack模板來構(gòu)造項目的話，可以跳過以上的配置。
　　UIkit的運行主要依賴于一個主樣式文件uikit.css、一個主題文件uikit.almost-flat.css（主題文件內(nèi)置有三個可選項）和一個腳本文件uikit.js。使用UIkit時，需要在代碼中同時import它們才能讓webpack在編譯時正確地引用。界面包都是全局性的，那么可以選擇在main.js文件一開始加入引用：

import 'jquery'import 'uikit'import 'uikit/dist/css/uikit.almost-flat.css'

　　這樣寫就違反了在第2章工程化Vue.js開發(fā)中的一個配置約定，我們不應該將“庫”或“依賴包”以全路徑方式引入到代碼文件中，而應該用webpack的resolve配置項，用別名來代替全路徑。以下是在webpack中配置UIkit的樣式引用別名：

resolve: {    alias: {        'vue$': 'vue/dist/vue',        'uikit-css$': 'uikit/dist/css/uikit.almost-flat.css'
    }
}

　　在main.js代碼內(nèi)引入UIkit，代碼就變?yōu)椋?/p>

import 'jquery'import 'uikit'import "uikit-css"

制作UIkit的Vue插件

　　上述的寫法還是不夠DRY，為了使用一個包就得引入多個不同的依賴庫，這種做法實在很難看，此時我們可以選擇一個Vue的最佳做法，就是用插件形式來包裝這種零碎化的引入方式。在src根目錄下新建一個uikit.js的文件，然后用Vue的插件格式來進行包裝。以下代碼中直接向Vue實例注入了UIkit的一些常用的幫助方法：

import 'jquery'import 'uikit'import 'uikit-css'export default (Vue, options) {    // 向?qū)嵗⑷險Ikit的對話框類方法
    Vue.prototype.$ui = {
        alert: UIkit.modal.alert
        confirm: UIkit.modal.confirm,
        prompt: UIkit.modal.prompt,
        block: UIkit.modal.block
    }
}

　　完成uikit.js的編寫就可以改寫main.js的內(nèi)容了：

import UIkit from './uikit'Vue.use(UIKit)

　　由于對Vue.prototype進行了擴展，那么就可以像vue-resource那樣在每個Vue實例內(nèi)的this方法中注入一個$ui對象，用以下方法來顯示簡單的對話框：

methods: {
    delItem() {        this.$ui.confirm('您確認要刪除以下的數(shù)據(jù)嗎？', () => {            // 這里編寫對數(shù)據(jù)進行刪除的代碼
        })
    }
}

　　上述的confirm方法有一個明顯的弱點，就是在回調(diào)時this上下文會指向window而不是Vue實例本身，這樣的話對于編碼的使用體驗就很差了。我們可以在插件內(nèi)對confirm做一個修飾，將回調(diào)方法的this重新指向Vue實例：

Vue.prototype.$ui = {   // ... 省略
   confirm (question,callback,cancelCallback,options) {
        UIkit.confirm(question,        callback || callback.apply(this),
        cancelCallback || cancelCallback.apply(this),
        options)
   }

}

　　apply函數(shù)是ECMA JavaScript的標準函數(shù)，用于更改調(diào)用方法上傳遞的上下文對象。上述代碼就是將回調(diào)函數(shù)的上下文強制替換為當前的Vue實例，避免了回調(diào)上下文丟失而需要手工去定義變量，“hold住”原有this上下文的痛苦。

關于apply函數(shù)詳細說明可以參考以下鏈接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply。

　　現(xiàn)在的代碼是不是感覺干凈多了？那么回過頭來看Vue的插件，在這里面我們不僅可以像上述代碼那樣單純地對Vue實例進行擴展，還可以進行更多的全局化的處理。當然這里的全局是指這個插件庫被引入Vue并調(diào)用use方法后，例如，我們可以將一些必要的組件或者指令混入插件方法內(nèi)：

export default = (Vue, options) => {  // 1. 注入全局化的方法
  Vue.myGlobalMethod = () => {    // ...
  }  // 2. 進行必要組件的注冊
  Vue.component('html-editor', { 
    HtmlEditor
  })  // 3. 注冊一個全局化的指令標記
  Vue.directive('sortable', {
    bind (el, binding, vnode, oldVnode) {      // something logic ...
    }
    ...
  })  // 4. 注入一些組件的選項
  Vue.mixin({    created: function () {      // ...
    }
    ...
  })  // 5. 擴展實例
  Vue.prototype.$ui = {}

}

UIkit中的坑

　　當運行以上的代碼后，會很沮喪地發(fā)現(xiàn)瀏覽器中總會出現(xiàn)UI.$為空的異常，具體顯示如下：

Type error UI.$ is undefined.

　　我曾嘗試過直接跳入UIkit的源代碼中查找UI.$，這個變量其實是對jQuery的一個內(nèi)部引用，準確地說這是在引用jQuery的腳本后由jQuery注冊到瀏覽器的window全局變量上的jQuery實例。估計是UIkit在生成加載代碼時變量的映射與初始化順序出現(xiàn)問題了。后來想了個辦法，直接在webpack.config.js配置內(nèi)對全局變量進行改寫，具體代碼如下：

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",            jQuery: "jquery",            "window.jQuery": "jquery",            "window.$": "jquery"
        })
]

　　webpack.ProvidePlugin這個插件是用于JS代碼加載后在window上注冊全局變量的一個webpack插件，加入了以上的配置后程序就能正常運行了。最終幸運地從大坑中逃出生還！這樣UIkit就被集成到我們的Vue項目中來了。
　　本文出自《Vue2實踐揭秘》一書，點此鏈接可在博文視點官網(wǎng)查看此書。
　　　　　　　　　　　　　　　　　　　　
　　想及時獲得更多精彩文章，可在微信中搜索“博文視點”或者掃描下方二維碼并關注。