首页 > 代码库 > 为Vue2集成UIkit

为Vue2集成UIkit

引言: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实践揭秘》一书,点此链接可在博文视点官网查看此书。
                    技术分享
  想及时获得更多精彩文章,可在微信中搜索“博文视点”或者扫描下方二维码并关注。
                       技术分享

为Vue2集成UIkit