在vue-cli3.x中配置使用VUX
写在前面
正常按照下面给定的配置,因官方更新过vue/cli3.x更新过vue-loader,导致的加载错误。之前因端午在家,未仔细查看错误,也没有去调试而武断的认为是webpack的问题,希望没有给大家造成困扰。vue-loader的版本更新之后,vux-loader的依赖版本还是之前版本,因而导致的下面评论区出现的错误。大家可以手动指定vue-loader的版本来解决此加载问题。
yarn add vue-loader@14.2.2 -D
or
npm install vue-loader@14.2.2 -D
2018/6/25更新
当时写此帖时,vue/cli3.x所使用的webpack版本和vux所使用的webpack大版本一致,现今vue/cli3.x所使用的webpack为4.x,与vux不一致,因此一些loader可能会出错。而且当时vue/cli3.x的文档并没有,故此写这篇自记和帮助大家,现在vue/cli3.x已进入RC,相应文档也已放出,各位可以通过vue/cli的文档来进行配置。
2018/6/18更新
vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面(官方介绍)。
这些天闲来无事用豆瓣开放的api练习一下vue-cli3.x,但是对于一些组件的实现自己写的实在太粗糙和功能不全,故而想引用一些优秀的三方UI组件。
vux算是我知道的较早的一个基于vuejs的UI组件库吧。但是当时没有需求,所以一直没有使用这个组件库,直到最近又重新关注了一下。
对于我的第一印象,就是vux的一些集成度太高了,虽然极大地方便一些开发者,使用vux-loader来按需加载组件库。对于之前的我来说,倒是很乐意这样的一个组件库产生,但是对于现在喜欢折腾一些新东西,就显得并不是非常的友好了(特别是对于我这种文档看的不那么细致的人来说)。
vue-cli3.x的一些服务配置整个的结构都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置提供了vue.config.js
。那么问题来了,对于这么一个入口,肯定不能直接按照vux-loader的方法直接在配置文件置空webpackConfig了。而单独组件引用的话又被告知使用错误(事实上都直接报错了,因为没有正确对于组件的load)。
参照vux-loader文档的配置说明,那么就是merge以下vux-loader的配置到webpackConfig里面呗,接下来就简单了。我们只需要在vue.config.js
文件中的webpackConfig的配置中mergevux-loader就行了。
module.exports = {
configureWebpack: config => {
require('vux-loader').merge(config, {
options: {},
plugins: ['vux-ui']
})
}
}
只要在vue.config.js
配置中这样配置,那么你就可以正常的在你的项目中使用vux这个组件库了。
题后说明
本人文中所提到的仅代表本人个人使用感受,并不能说明事物实际属性,大家仅在乎配置相关即可。vux
作为非大团队维护的UI组件库,是一款非常优秀的基于vuejs
的UI组件库。对于移动端的一些组件可以说是最全(仅在我的认知内)的,而且还提供了一些常用而实用的lib,在github
上的star数已经超过12k,可以说是非常受欢迎的了。
还有一点.......不要在意文笔,实在不会写文章,求轻喷。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。