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里配置的值将会覆盖上面地址里配置的值

 

  

vux-- Vue.js 移动端 UI 组件库的更多相关文章

  1. 基于Svelte3.x桌面端UI组件库Svelte UI

    Svelte-UI,一套基于svelte.js开发的桌面pc端ui组件库 最近一直忙于写svelte-ui,一套svelte3开发的桌面端ui组件库.在设计及功能上借鉴了element-ui组件库.所 ...

  2. 前端笔记之Vue(四)UI组件库&Vuex&虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4 ...

  3. vux 是基于 WeUI 和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

    https://doc.vux.li/zh-CN/ https://vux.li/

  4. Weex Ui 是一个基于 Weex 的富交互、轻量级、高性能的移动端 UI 组件库

    Github资源:https://github.com/alibaba/weex-ui 预览 你可以通过飞猪.淘宝.天猫.Weex Playground 或者浏览器扫码体验 安装 npm i weex ...

  5. 总结:iview(基于vue.js的开源ui组件)学习的一些坑

    1.要改变组件的样式 找到这个组件的class名,然后覆盖样式. 举例:修改select框,显示圆角.只需给找到类名并写样 .ivu-select-selection{ border-radius:1 ...

  6. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  7. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  8. 【转】优秀的Vue UI组件库

    原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...

  9. VUE:UI组件库(Mint UI & Elment)

    VUE:UI组件库 常用 1)Mini UI: a 主页:http://mint-ui.github.io/#!/zh-cn b 说明:饿了么开源的基于vue的移动端UI组件库 2)Elment a ...

随机推荐

  1. P1559 运动员最佳匹配问题 by hyl 天梦

    #include<iostream> using namespace std; int n; int maxx[21][21]; int lie[21]; int aa[21]; int ...

  2. CDH大数据平台搭建终极版

    经过无数次的失败,终于将CDH安装到两台普通的笔记本电脑上,主要失败原因有以下几点: 不熟悉安装过程,官方给出的安装方法有三种,所以都尝试了一遍,浪费了大量时间,所以有时候方法多不见得是一件好事. 安 ...

  3. php变量中两种特殊类型

    第一种----资源 资源(resource):资源是由专门的函数来建立和使用的,例如打开文件.数据连接.图形画布.我们可以对资源进行操作(创建.使用和释放).任何资源,在不需要的时候应该被及时释放.如 ...

  4. axios用post传参,后端无法获取参数问题

    最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数. 后台是node+express框架,然后使用了body-parser包接收参数,配置如下: const expr ...

  5. centos7.6+python3+apache2.4+django2.1.2网站部署总结

    本次网站部署是使用了django2.1.2版本部署,由于centos自带的Python2.7不支持django2.0以上版本,故需要安全python3的环境.python3.apache的安装不做具体 ...

  6. win10下安装Anaconda3

    1.官方下载:https://www.anaconda.com/distribution/#download-section  (最新版直接下即可) 或者国内镜像下载:https://mirrors. ...

  7. 六、Django学习之基于下划线的跨表查询

    六.Django学习之基于下划线的跨表查询 一对一 正向查询的例子为 已知用户名,查询用户的电话号码.反向查询例子反之. 正向查询 其中下划线前的表示表名,无下划线的表示的是Author表 resul ...

  8. Python用WMI模块获取windowns系统信息

    安装vmi https://pypi.org/project/WMI/#history 脚本如下: #!/usr/bin/env python #coding:utf- import wmi impo ...

  9. A Simple Introduction To Computer Networking

    Most networking discussions are a jumble of acronyms. Forget the configuration details - what are th ...

  10. Tarjan算法——强连通、双连通、割点、桥

    Tarjan算法 概念区分 有向图 强连通:在有向图\(G\)中,如果两个顶点\(u, v\ (u \neq v)\)间有一条从\(u\)到\(v\)的有向路径,同时还有一条从\(v\)到\(u\)的 ...