程序员

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

2019-10-09  本文已影响0人  手指乐
  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'},
]
})
  1. 使用
    在main.js或需要用vux组件的vue文件里面:
import { AlertPlugin } from "vux";
Vue.use(AlertPlugin)

组件里:

methods: {
vuealert(msg) {
this.$vux.alert.show({
content: msg,
buttonText: "好的",
hideOnBlur: true
});
}
},
  1. 配置全局变量
    如果要对全局变量(比如颜色、字体)进行配置,需要增加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里配置的值将会覆盖上面地址里配置的值

上一篇下一篇

猜你喜欢

热点阅读