引言：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实践揭秘》一书，点此链接可在博文视点官网查看此书。
想及时获得更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow