标签归档:vux

Vux怎么用 样式变量 修改主题配色

1、什么是Vuejs,什么是Vux,如果这两者你都清楚的话,绕过;
2、vux的文档中,组件一般分为安装、属性、事件、插槽、样式变量等方面进行介绍;
3、样式变量就是这里要讲的主题,根据业务需要我们有时候需要修改组件的样式;
4、修改样式通常的做法是在vue中用css样式去覆盖原有的样式,这里有两个问题;
4.1、如果样式文件没有加scoped关键字,很多样式需要在后面加!important才能强制生效;
4.2、如果多个vue中需要用到这个组件,难不成一个一个去改,或者重写这个组件?!
5、比较好的办法就是将修改样式变量!
6、好了,所有的问题都解决了,只需要关注如何修改这些个样式变量即可!
7、分两步:
7.1、新建一个样式文件,比如src/style/theme.less;
7.2、修改工程中build/webpack.base.conf.js文件,在安装vux时官方告诉你应该这样:

1
2
3
4
5
6
const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
 
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

7.3、现在将plugins:[‘vux-ui’]改成:

1
2
3
4
5
6
7
8
  plugins: [{
      name: 'vux-ui'
    },
    {
      name: 'less-theme',
      path: 'src/common/style/theme.less'
    }
  ]

7.4、稍微解释一下,这个path就是前面新建主题样式文件theme.less的路径;
7.5、接下来就是在theme.less中重写样式 变量即可。
7.5.1、比如:@button-global-border-radius:10px这样就替换掉x-button中圆角边框的值;

Vue项目中当前比较好的移动端UI库–vux

官方网址:https://vux.li

1.安装vux

npm install vux --save

2.安装vux-loader(vux2必须结合vux-loader使用)

npm install vux-loader --save-dev

请在build/webpack.base.conf.js里参照如下代码进行配置:

1
2
3
4
5
6
7
const vuxLoader = require('vux-loader')
// 官方文档这句话有点坑,基础不好的请注意,这里的意思是说将原来文件module.exports = {....}
// 替换成const webpackConfig = {....},没有"originalConfig"这个变量
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

3.安装less-loader以正确编译less源码

npm install less less-loader --save-dev

安装完成记得在webpack.base.conf.js里做如下配置,在extensions里加入less

1
2
3
4
5
6
7
resolve: {
    extensions: ['.js', '.vue', '.json', 'less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

4、安装 yaml-loader 以正确进行语言文件读取

npm install yaml-loader --save-dev

5、引入 reset.less,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在App.vue进行手动引入

1
2
3
<style lang="less">
@import '~vux/src/styles/reset.less';
</style>