使用x-header，查看文档发现有个样式变量，可以改变x-header的样式

这玩意怎么用呢？

1.在项目中创建一个.less样式文件，例如我这里是创建一个src/style/vux_theme.less文件

2.编辑vux_theme.less文件

如这里是，copy  x-header的@header-background-color ，并将值设置为#353535

意思是将x-header的背景颜色从默认的#35495e 改为 #353535

3.很重要，很重要，很重要：配置引入自己定义的vux_theme.less样式文件，如下：

在项目的build/webpack.base.conf.js中找到引入vux-ui的地方，在下方添加语句

{name:'less-theme',path:'src/style/vux_theme.less'},//这里的路径为自定的less文件的路径

npm run dev 重新编译，会发现所有的x-header都统一更换了背景色

vux组件的样式变量的使用的更多相关文章

  1. 记：使用vue全家桶 + vux组件库 打包成 dcloud 5+ app 开发过程中遇到的问题

    vue-cli 版本:2.9.6   webpack 版本:3.6.0 1. vue-cli 安装好之后,不是自动打开默认浏览器 在 config文件夹 ---> dev选项中,有个 autoO ...

  2. vux 组件打造手机端项目

    其实,我用vux组件的过程是这样的,哇!太方便了!!功能好全!!太简单了!!然后,就各种"跳坑".以下排坑环节. 1.安装vux:cnpm i -S vux;   比较顺利吧. 2 ...

  3. 基于VUE,VUX组件开发的网易新闻页面搭建过程

    根据妙味课堂上的一个教程练习总结,供自己复习用 一.功能介绍 一个网易新闻客户端的浏览页面,通过网易新闻的api接口实时获取新闻数据,用vux搭建样式框架,以轮播图,文字滚动,图文列表等形式把内容展示 ...

  4. stenciljs 学习六 组件开发样式指南

    组件不是动作,最好使用名词而不是动词, 文件结构 每个文件一个组件. 每个目录一个组件.虽然将类似的组件分组到同一目录中可能是有意义的,但我们发现当每个组件都有自己的目录时,更容易记录组件. 实现(. ...

  5. vux修改css样式的2种办法

      最近手上有个移动端的项目.前端UI框架是选择的VUX.但是在使用的时候经常会发现框架自带的组件样式和我们要求的不一致.经常需要手动覆盖样式.这里记录下我们使用的2种方法. 我们以XHeader组件 ...

  6. 如何在SSIS的脚本组件中访问变量

    原文:如何在SSIS的脚本组件中访问变量 这是一个小问题,我们在SSIS的设计中很多地方都会用到变量,我习惯性地将"变量"和"表达式"称为SSIS的灵魂,虽然不 ...

  7. vue-cli中父子组件间的变量传递

    vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...

  8. vue-cli3.0 flexible&px2rem 解决第三方ui组件库样式问题

    背景 在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题.那些组件库的样式都变小了. 问题原因 变小的主要原因是第三库 css ...

  9. 修改element表格组件的样式

    最近在开发一个项目,使用到了element中的表格组件,但是该组件的样式不是我们想要的样式,需要自己再调整,但是常常会遇到自己设置的样式无效,我使用的技术是Vue开发的 1. 页面使用了三栏布局,最右 ...

随机推荐

  1. 学习笔记：flutter项目搭建(mac版)

    什么是flutter Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的 ...

  2. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  3. Java基础（三十三）JDBC（3）操作数据库

    一.添加数据 在SQL语句中,一条INSERT语句只能添加一条记录,因此分为几种情况进行添加数据操作. 1.添加一条记录 (1)如果只需要添加一条记录,通常情况下通过Statament实例完成. tr ...

  4. unity UI事件

    由于工作需要到持续按键,所以了解了一下unity UI事件,本文主要转载于http://www.cnblogs.com/zou90512/p/3995932.html?utm_source=tuico ...

  5. boostrap原理.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. unity 之 自定义弹出框

    一.弹出框的搭建: 布局如图:Message为整个父物体,并且添加UiMessage代码.panel为遮罩. MessageBox为整个提示框,Panel为标题,ok为确定按钮,cancel为取消按钮 ...

  7. SpringBoot系列之YAML配置用法

    1.全局配置 SpringBoot的全局配置文件有两种: application.properties application.yml 配置文件的作用:修改SpringBoot自动配置的默认值,主要是 ...

  8. java script三大组成部分

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  9. 激活Sublime Text 3，亲测有效！

    一.修改sunlime_text.exe 打开Sublime Text的安装目录,在修改之前要先备份一下sunlime_text.exe. 欢迎关注微信公众号:万猫学社,每周一分享Java技术干货. ...

  10. Jenkins流水线获取提交日志

    写在前 之前使用Jenkins pipeline的时候发现拿不到日志,使用multiple scms插件对应是日志变量获取日志的方式失效了, 但是查看流水线Pipeline Syntax发现check ...