vux-- Vue.js 移动端 UI 组件库

1.使用

安装或更新：

　npm install vux --save

  npm install vux-loader --save

 如果没有安装less：

   npm install less less-loader --save-dev

在build/webpack.base.conf.js里配置

把之前的module.exports部分赋值给一个变量，比如：

let webpackConfig = {

   .......//初始的module.exports部分

}

在文件结尾加上：

module.exports = vuxLoader.merge(webpackConfig,{

plugins:[

{name: 'vux-ui'},

]

})

 

2.使用

  在main.js里面：

   import { AlertPlugin } from "vux";

   Vue.use(AlertPlugin)

  组件里： 

methods: {
vuealert(msg) {
this.$vux.alert.show({
content: msg,
buttonText: "好的",
hideOnBlur: true
});
}
},

 3.配置全局变量

如果要对全局变量（比如颜色、字体）进行配置，需要增加less文件,新建一个less文件（比如src/style/theme.less），加入标红的配置

module.exports = vuxLoader.merge(webpackConfig,{

plugins:[

{name: 'vux-ui'},

{name: 'less-theme', path: 'src/style/theme.less'}

]

})

能配置的全局变量参考:

https://github.com/airyland/vux/blob/v2/src/styles/variable.less

 在theme.less里配置的值将会覆盖上面地址里配置的值

 

 

   

 

　　

 

 

 

 

 

 

转载于:https://www.cnblogs.com/cowboybusy/p/11026793.html