Vue中的Vux配置指南
簡介
Vux（讀音 [v'ju:z]，同views）是基于WeUI和Vue(2.x)開發(fā)的移動端UI組件庫，主要服務(wù)于微信頁面。
基于webpack+vue-loader+vux可以快速開發(fā)移動端頁面，配合vux-loader方便你在WeUI的基礎(chǔ)上定制需要的樣式。
vux-loader保證了組件按需使用，因此不用擔(dān)心最終打包了整個vux的組件庫代碼。
vux并不完全依賴于WeUI，但是盡量保持整體UI樣式接近WeUI的設(shè)計規(guī)范。最初目標(biāo)是創(chuàng)建一個易用，實用，美觀的移動端UI組件庫，現(xiàn)在離理想狀態(tài)還有不少距離，因此需要大家及時反饋問題及貢獻(xiàn)代碼。
流程
Vux是Vue.js的一個ui庫，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡化一下Vux的配置流程。
1. 安裝vux
npm install vux --save
2. 安裝less-loader
vux使用less編譯源碼，所以項目里必須要有l(wèi)ess-loader。
npm install less less-loader --save-dev
3. 安裝vux-loader并配置vuxLoader：
安裝vux-loader：
npm install less vux-loader --save-dev
你可以不安裝不配置vux-loader，不配置的話引入組件是這樣的：
import AlertPlugin from 'vux/src/plugins/Alert' import ToastPlugin from 'vux/src/plugins/Toast'
配置之后就可以這樣引入組件了：
import { AlertPlugin, ToastPlugin } from 'vux'
配置流程如下：
在webpack.base.config.js中修改如下，其中webpackConfig是你之前的配置（也就是之前module.export右邊的那一坨，現(xiàn)在保存為這個變量）：
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {
showVuxVersionInfo: false //關(guān)閉vux在console里輸出的版本信息
},
plugins: [{
name: 'vux-ui'
}]
})
總結(jié)
以上所述是小編給大家介紹的Vue中的Vux配置指南，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
VUE3中實現(xiàn)拖拽與縮放自定義看板vue-grid-layout詳解
想實現(xiàn)桌面自由拖拽布局的效果,找到了vue-grid-layout柵格布局插件,可以完美解決,下面這篇文章主要給大家介紹了關(guān)于VUE3中實現(xiàn)拖拽與縮放自定義看板vue-grid-layout的相關(guān)資料,需要的朋友可以參考下2023-02-02
下面小編就為大家分享一篇vue實現(xiàn)a標(biāo)簽點擊高亮方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了在Vue3項目中使用如何echarts問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue-iview動態(tài)新增和刪除的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
Vue3+Spring Framework框架開發(fā)實戰(zhàn)
這篇文章主要為大家介紹了Vue3+Spring Framework框架開發(fā)實戰(zhàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了Vue+Koa2 打包后如何進(jìn)行線上部署，給大家分享了一些問題及解決方法,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了TDesign在vitest的實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue data變量相互賦值后被實時同步的解決步驟，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了解決echart在vue中id重復(fù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03