vue项目中vux的使用

<h2 id="vux">vux

VUX 是基于 WeUI 和 Vue.js 的 移动端 UI 组件库,提供丰富的组件满足移动端(微信)页面常用业务需求。 在vue-cli中使用步骤如下：

npm i vux -S

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']

})

<h3 id="安装less-loader-编译">3、安装less-loader 编译

npm i less less-loader -D

npm i yaml-loader -D

• 全局使用，需在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: '请输入查询内容!'

});

• 更多组件的使用

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!