美文网首页程序员
vux-- Vue.js 移动端 UI 组件库

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

作者: 手指乐 | 来源:发表于2019-10-09 10:34 被阅读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里配置的值将会覆盖上面地址里配置的值

    相关文章

      网友评论

        本文标题:vux-- Vue.js 移动端 UI 组件库

        本文链接:https://www.haomeiwen.com/subject/mzmwpctx.html