vue項目中vux的使用

vux

VUX 是基於 WeUI 和 Vue.js 的 移動端 UI 組件庫,提供豐富的組件滿足移動端(微信)頁面常用業務需求。
在vue-cli中使用步驟如下：

1、安裝：

npm i vux -S

2、vux2必須配合vux-loader使用，並配置build/webpack.base.conf.js

npm i vux-loader -D

  const vuxLoader = require("vux-loader")
  const webpackConfig = originalConfig 
  //原來的module.exports 代碼賦值給變webpackConfig
    //註意：請把 resolve 里的 symlink 設為 true 如果你是使用 cnpm 進行依賴安裝
    //註意：原來build/webpack.base.conf.js中的module.exports 代碼賦值給變數 webpackConfig

  module.exports = vuxLoader.merge(webpackConfig, {
    plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
  })

3、安裝less-loader 編譯

npm i less less-loader -D

4、安裝yaml-loader 以正確進行語言文件讀取

npm i yaml-loader -D

5、開始使用：

• 全局使用，需在main.js中配置

import { LoadingPlugin, ToastPlugin ,AlertPlugin } from 'vux'
Vue.use(LoadingPlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)

• 組件中調用

// 顯示等待框
this.$vux.loading.show({
  text: '載入中...'
});
 
// 隱藏等待框
setTimeout(() => {
  this.$vux.loading.hide()
}, 300);

// 提示信息
this.$vux.toast.show({
  type: 'text',
  position: 'middle',
  text: '請輸入查詢內容!'
});

• 更多組件的使用點這裡