标签归档：vue

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+Webpack打包后background-image无法正常显示

发表评论

1、背景：正常情况下打包后的页面都是基于在网站根目录下运行，原则上不会出现这种情况，但如果项目放在网站的二级目录或本地运行（官方不建议本地运行项目，可能涉及到网络请求的问题）
2、基于项目在二级目录下运行，即打开时需要输入http://xxx.xxx.xxx/xxx，而不是直接http://xxx.xxx.xxx这种
3、二级目录下打包后的项目要能正常运行，需要在config/index.js中

build:{
   ....
   assetsPublicPath: '/'
   ....
}

修改成：assetsPublicPath: ‘./’
4、问题来了，因为是相对路径，所以在css中写的url是相对当前这个css文件的，所以打包后的背景图片url如果为static/img/xxx.jpg，结果解析出来的路径是xxxxx/static/css/static/img/xxx.jpg，图片当然无法正常显示了;
5、也许有些人会发现，为什么有些图片是正常的？好像并不是都不行啊，注意了，那些没有问题的图片看下路径是不是加载的base64格式？！
6、在webpack.base.conf.js中会有这么一段

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

这里的意思是说，小于10K的图片资源会在打包时直接转成base64，你可以把这个值放大，大于你的背景图，这样也可以解决
7、还有另外一个办法，在build/utils.js文件中找到下面这一段

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

修改成：

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

只是加了一行publicPath: ‘../../’，这样一来样式文件会相对于根目录加载，这种方式也是有局限性的，为什么可以写两个../就行了呢？因为我们的img与css都是放在static目录下的二级目录，所以两个../刚好到static同级，如果不是则会出错的哦，注意就行！

参考链接：https://segmentfault.com/q/1010000009700735

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>