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

创新互联建站是专业的博乐网站建设公司，博乐接单;提供成都网站制作、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行博乐网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

在实际开发中，还有很多常用组件，例如，分页、按钮、输入框、导航栏、日期/时间选择器、图片输入，等等。很明显的是这些组件的通用性已不单单存在于一个项目内，而是所有的项目都需要！这是个比拼开发速度的年代，我们已经没有时间重复发明轮子了，最正确的选择是使用界面框架，例如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('您确认要删除以下的数据吗？', () => {            // 这里编写对数据进行删除的代码
        })
    }
}

　　　　
　　想及时获得更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。
　　　　　　　　　　　　　　　　　　　　　　　

本文名称：为Vue2集成UIkit
链接分享：http://scyanting.com/article/pehdsi.html