vue-cli 3.x配置使用vux

KitorinZero 發(fā)布于2019-08-22 16:43 / 2745人閱讀

摘要：在中配置使用寫(xiě)在前面正常按照下面給定的配置，因官方更新過(guò)更新過(guò)，導(dǎo)致的加載錯(cuò)誤。題后說(shuō)明本人文中所提到的僅代表本人個(gè)人使用感受，并不能說(shuō)明事物實(shí)際屬性，大家僅在乎配置相關(guān)即可。作為非大團(tuán)隊(duì)維護(hù)的組件庫(kù)，是一款非常優(yōu)秀的基于的組件庫(kù)。

在vue-cli3.x中配置使用VUX 寫(xiě)在前面

正常按照下面給定的配置，因官方更新過(guò)vue/cli3.x更新過(guò)vue-loader，導(dǎo)致的加載錯(cuò)誤。之前因端午在家，未仔細(xì)查看錯(cuò)誤，也沒(méi)有去調(diào)試而武斷的認(rèn)為是webpack的問(wèn)題，希望沒(méi)有給大家造成困擾。vue-loader的版本更新之后，vux-loader的依賴版本還是之前版本，因而導(dǎo)致的下面評(píng)論區(qū)出現(xiàn)的錯(cuò)誤。大家可以手動(dòng)指定vue-loader的版本來(lái)解決此加載問(wèn)題。

yarn add vue-loader@14.2.2 -D
or
npm install vue-loader@14.2.2 -D

2018/6/25更新

當(dāng)時(shí)寫(xiě)此帖時(shí)，vue/cli3.x所使用的webpack版本和vux所使用的webpack大版本一致，現(xiàn)今vue/cli3.x所使用的webpack為4.x，與vux不一致，因此一些loader可能會(huì)出錯(cuò)。而且當(dāng)時(shí)vue/cli3.x的文檔并沒(méi)有，故此寫(xiě)這篇自記和幫助大家，現(xiàn)在vue/cli3.x已進(jìn)入RC，相應(yīng)文檔也已放出，各位可以通過(guò)vue/cli的文檔來(lái)進(jìn)行配置。

2018/6/18更新

vux是基于WeUI和Vue(2.x)開(kāi)發(fā)的移動(dòng)端UI組件庫(kù)，主要服務(wù)于微信頁(yè)面(官方介紹)。
這些天閑來(lái)無(wú)事用豆瓣開(kāi)放的api練習(xí)一下vue-cli3.x，但是對(duì)于一些組件的實(shí)現(xiàn)自己寫(xiě)的實(shí)在太粗糙和功能不全，故而想引用一些優(yōu)秀的三方UI組件。
vux算是我知道的較早的一個(gè)基于vuejs的UI組件庫(kù)吧。但是當(dāng)時(shí)沒(méi)有需求，所以一直沒(méi)有使用這個(gè)組件庫(kù)，直到最近又重新關(guān)注了一下。
對(duì)于我的第一印象，就是vux的一些集成度太高了，雖然極大地方便一些開(kāi)發(fā)者，使用vux-loader來(lái)按需加載組件庫(kù)。對(duì)于之前的我來(lái)說(shuō)，倒是很樂(lè)意這樣的一個(gè)組件庫(kù)產(chǎn)生，但是對(duì)于現(xiàn)在喜歡折騰一些新東西，就顯得并不是非常的友好了（特別是對(duì)于我這種文檔看的不那么細(xì)致的人來(lái)說(shuō)）。
vue-cli3.x的一些服務(wù)配置整個(gè)的結(jié)構(gòu)都遷移到CLI Service里面了，對(duì)于一些基礎(chǔ)配置和一些擴(kuò)展配置提供了vue.config.js。那么問(wèn)題來(lái)了，對(duì)于這么一個(gè)入口，肯定不能直接按照vux-loader的方法直接在配置文件置空webpackConfig了。而多帶帶組件引用的話又被告知使用錯(cuò)誤（事實(shí)上都直接報(bào)錯(cuò)了，因?yàn)闆](méi)有正確對(duì)于組件的load）。
參照vux-loader文檔的配置說(shuō)明，那么就是merge以下vux-loader的配置到webpackConfig里面唄，接下來(lái)就簡(jiǎn)單了。我們只需要在vue.config.js文件中的webpackConfig的配置中mergevux-loader就行了。

module.exports = {
    configureWebpack: config => {
        require("vux-loader").merge(config, {
            options: {},
            plugins: ["vux-ui"]
        })
    }
}

只要在vue.config.js配置中這樣配置，那么你就可以正常的在你的項(xiàng)目中使用vux這個(gè)組件庫(kù)了。

題后說(shuō)明

本人文中所提到的僅代表本人個(gè)人使用感受，并不能說(shuō)明事物實(shí)際屬性，大家僅在乎配置相關(guān)即可。
vux作為非大團(tuán)隊(duì)維護(hù)的UI組件庫(kù)，是一款非常優(yōu)秀的基于vuejs的UI組件庫(kù)。對(duì)于移動(dòng)端的一些組件可以說(shuō)是最全（僅在我的認(rèn)知內(nèi)）的，而且還提供了一些常用而實(shí)用的lib，在github上的star數(shù)已經(jīng)超過(guò)12k，可以說(shuō)是非常受歡迎的了。
還有一點(diǎn).......不要在意文筆，實(shí)在不會(huì)寫(xiě)文章，求輕噴。