为Vue2集成UIkit

Posted 2020-09-14 博文视点

引言：Vue只是为我们提供了一个很优秀的前端组件式开发框架，但单纯依靠Vue是做不出一个漂亮的网页应用的，甚至连“不难看”这个标准都达不到。这个时候借助界面框架UIkit能够很好地解决这一问题。
本文出自《Vue2实践揭秘》一书。

　　在实际开发中，还有很多常用组件，例如，分页、按钮、输入框、导航栏、日期/时间选择器、图片输入，等等。很明显的是这些组件的通用性已不单单存在于一个项目内，而是所有的项目都需要！这是个比拼开发速度的年代，我们已经没有时间重复发明轮子了，最正确的选择是使用界面框架，例如Bootstrap、UIkit、Foundation等来代替这种大量的重复性极强的界面样式开发工作。

UIkit

　　Bootstrap已经有很多年历史了，在业界的应用也相当普遍，无论是前端开发或者后端开发，为了能快速做一个不算太难看的界面，它自然成为众多工程师的选择，包括我。多年下来，Bookstrap的改进实在是太缓慢了。不客气地说，它基本上就没让我们这些用户感觉它改进过，同质化严重，功能性组件一直不见增加，等等，都让我们只能是痛并用着。
　　UIkit给我们带来了福音，无论从界面上的样式，还是实用组件的数目，甚至到易用性来说都要比Bootstrap好上一个层次。唯一的缺陷是它出生得比较晚，可选的主题样式资源不多，毕竟还需要时间让第三方社区来推动发展。但用它来做一个漂亮的交互性强的应用绝对是一个最佳的推荐方案。
　　Vue社区上也有一些包装UIkit的库，如vuikit，但它的文档实在太少了，甚至从一开始的安装配套都做得非常差，基本上是脱离了UIkit的核心样式包和核心脚本编写的。虽然努力可嘉，但这种功能性复制的包建议还是不要用，前端最耗不起的就是编译包的大小。每个引入的第三方包我们都得吝啬地测算一下得失，即使webpack可以用chuck来分包，但也不能滥用，否则加载速度缓慢就是破坏使用体验的最大因素。

安装

　　虽然在AngularJS、React和Vue的项目中jQuery从来都是一个不受欢迎的库。首先是它编译出来后就非常大，而且影响我们的MVVM思维，容易因为图方便而又回到jQuery那种直接操控DOM的死路上去。但jQuery的强大在于它的普及性，几乎我们能找到的很多优秀小组件都会有jQuery版本，甚至只有jQuery的版本。而UIkit正是其中一员，不能抗拒的话也只能学会享受。我们得同时安装jQuery、UIkit两个库：

$ npm i jquery uikit -D

配置

　　我们需要将jQuery和UIkit的引用以及一些字体的引用配置添加到webpack中（UIkit内置引用了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模板来构造项目的话，可以跳过以上的配置。
　　UIkit的运行主要依赖于一个主样式文件uikit.css、一个主题文件uikit.almost-flat.css（主题文件内置有三个可选项）和一个脚本文件uikit.js。使用UIkit时，需要在代码中同时import它们才能让webpack在编译时正确地引用。界面包都是全局性的，那么可以选择在main.js文件一开始加入引用：

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

　　这样写就违反了在第2章工程化Vue.js开发中的一个配置约定，我们不应该将“库”或“依赖包”以全路径方式引入到代码文件中，而应该用webpack的resolve配置项，用别名来代替全路径。以下是在webpack中配置UIkit的样式引用别名：

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

　　在main.js代码内引入UIkit，代码就变为：

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) {

    // 向实例注入UIkit的对话框类方法
    Vue.prototype.$ui = {
        alert: UIkit.modal.alert
        confirm: UIkit.modal.confirm,
        prompt: UIkit.modal.prompt,
        block: UIkit.modal.block
    }
}

　　完成uikit.js的编写就可以改写main.js的内容了：

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

　　由于对Vue.prototype进行了扩展，那么就可以像vue-resource那样在每个Vue实例内的this方法中注入一个$ui对象，用以下方法来显示简单的对话框：

methods: {
    delItem() {
        this.$ui.confirm('您确认要删除以下的数据吗？', () => {
            // 这里编写对数据进行删除的代码
        })
    }
}

　　　　　　　　　　　　

　　上述的confirm方法有一个明显的弱点，就是在回调时this上下文会指向window而不是Vue实例本身，这样的话对于编码的使用体验就很差了。我们可以在插件内对confirm做一个修饰，将回调方法的this重新指向Vue实例：

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

}

　　apply函数是ECMA javascript的标准函数，用于更改调用方法上传递的上下文对象。上述代码就是将回调函数的上下文强制替换为当前的Vue实例，避免了回调上下文丢失而需要手工去定义变量，“hold住”原有this上下文的痛苦。

关于apply函数详细说明可以参考以下链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply。

　　现在的代码是不是感觉干净多了？那么回过头来看Vue的插件，在这里面我们不仅可以像上述代码那样单纯地对Vue实例进行扩展，还可以进行更多的全局化的处理。当然这里的全局是指这个插件库被引入Vue并调用use方法后，例如，我们可以将一些必要的组件或者指令混入插件方法内：

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中的坑

　　当运行以上的代码后，会很沮丧地发现浏览器中总会出现UI.$为空的异常，具体显示如下：

Type error UI.$ is undefined.

　　我曾尝试过直接跳入UIkit的源代码中查找UI.$，这个变量其实是对jQuery的一个内部引用，准确地说这是在引用jQuery的脚本后由jQuery注册到浏览器的window全局变量上的jQuery实例。估计是UIkit在生成加载代码时变量的映射与初始化顺序出现问题了。后来想了个办法，直接在webpack.config.js配置内对全局变量进行改写，具体代码如下：

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

　　webpack.ProvidePlugin这个插件是用于JS代码加载后在window上注册全局变量的一个webpack插件，加入了以上的配置后程序就能正常运行了。最终幸运地从大坑中逃出生还！这样UIkit就被集成到我们的Vue项目中来了。
　　本文出自《Vue2实践揭秘》一书，点此链接可在博文视点官网查看此书。
　　　　　　　　　　　　　　　　　　　　
　　想及时获得更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。