标签：style 也有 文件 vue-cli 易用 css lca 标记 引入
引言：Vue只是为我们提供了一个很优秀的前端组件式开发框架，但单纯依靠Vue是做不出一个漂亮的网页应用的，甚至连“不难看”这个标准都达不到。这个时候借助界面框架UIkit能够很好地解决这一问题。
本文出自《Vue2实践揭秘》一书。
在实际开发中，还有很多常用组件，例如，分页、按钮、输入框、导航栏、日期/时间选择器、图片输入，等等。很明显的是这些组件的通用性已不单单存在于一个项目内，而是所有的项目都需要！这是个比拼开发速度的年代，我们已经没有时间重复发明轮子了，最正确的选择是使用界面框架，例如Bootstrap、UIkit、Foundation等来代替这种大量的重复性极强的界面样式开发工作。
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"
上述的写法还是不够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 = {}
}
当运行以上的代码后，会很沮丧地发现浏览器中总会出现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实践揭秘》一书，点此链接可在博文视点官网查看此书。
想及时获得更多精彩文章，可在微信中搜索“博文视点”或者扫描下方二维码并关注。
标签：style 也有 文件 vue-cli 易用 css lca 标记 引入
原文地址：http://blog.csdn.net/broadview2006/article/details/70788104
