Vue中的Vux配置指南

vux中文文檔 http://www.javashuo.com/tag/在線預覽html

簡介vue

Vux(讀音 [v'ju:z],同views)是基於WeUI和Vue(2.x)開發的移動端UI組件庫,主要服務於微信頁面。webpack

基於webpack+vue-loader+vux能夠快速開發移動端頁面,配合vux-loader方便你在WeUI的基礎上定製須要的樣式。web

vux-loader保證了組件按需使用,所以不用擔憂最終打包了整個vux的組件庫代碼。npm

vux並不徹底依賴於WeUI,可是儘可能保持總體UI樣式接近WeUI的設計規範。最初目標是建立一個易用,實用,美觀的移動端UI組件庫,如今離理想狀態還有很多距離,所以須要你們及時反饋問題及貢獻代碼。微信

流程less

Vux是Vue.js的一個ui庫,官網在這裏,官方文檔的配置指南側重於技術的羅列,我這裏簡化一下Vux的配置流程。post

1. 安裝vuxui

npm install vux --savespa

2. 安裝less-loader

vux使用less編譯源碼,因此項目裏必需要有less-loader。

1
npm install less less-loader --save-dev

3. 安裝vux-loader並配置vuxLoader:

安裝vux-loader:

1
npm install less vux-loader --save-dev

你能夠不安裝不配置vux-loader,不配置的話引入組件是這樣的:

1
2
import  AlertPlugin from 'vux/src/plugins/Alert'
import  ToastPlugin from 'vux/src/plugins/Toast'

配置以後就能夠這樣引入組件了:

1
import  { AlertPlugin, ToastPlugin } from 'vux'

配置流程以下:

在webpack.base.config.js中修改以下,其中webpackConfig是你以前的配置(也就是以前module.export右邊的那一坨,如今保存爲這個變量):

1
2
3
4
5
6
7
8
9
const vuxLoader = require( 'vux-loader' )
module.exports = vuxLoader.merge(webpackConfig, {
   options: {
     showVuxVersionInfo: false  //關閉vux在console裏輸出的版本信息
   },
   plugins: [{
     name: 'vux-ui'
   }]
})<br><a href= "http://www.pdfxs.com/search?q=JUFD-583"  target= "_blank" >http://www.pdfxs.com/search?q=JUFD-583</a>

 

 

 

轉發自(https://www.cnblogs.com/yaogua/p/8012953.html)

相關文章
相關標籤/搜索