开发app直播商城源码，如何进行组件重写

app直播商城源码开发多年，并且一直和UI、测试同学，针对组件库的事甩锅给组件的开发者。

虽然通可以暂时将app直播商城源码存在的问题压下去，但是这毕竟不是一个好的解决问题的方式。所以还是需要去解决。 针对样式问题，组件库的官方其实会给出一个解决解决方案。

iview组件库的样式覆盖

环境：vue@2.6.6 iview@3.2.2

error

使用vue.config.js修改lessloader的配置，才可以顺利覆盖less文件。

module.exports = {
css: {
loaderOptions: {
less: {
// 这里的选项会传递给 less-loader
JavascriptEnabled: true
}
}
}
}


app直播商城源码只要修改less变量的值，就能够达到修改样式的目的，如下是部分变量

// Prefix
@css-prefix : ivu-;
@css-prefix-iconfont : ivu-icon;
// Color
@primary-color : #2d8cf0;
...


element-ui组件库的样式覆盖

创建vue项目时记得选择scss就可以

做如下修改

/* 改变主题色变量 */
$--color-primary: teal;
$--button-font-size: 16px !default;
$--border-radius-base: 0px !default;
$--border-radius-small: 0px !default;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";


覆盖变量可以参考 element 项目中定义的变量

/* Element Chalk Variables */
/* Colors
-------------------------- */
$--color-white: #fff !default;
$--color-black: #000 !default;
$--color-primary: #409EFF !default;
...


从修改上来看还是element-ui是个正经的组件库。

iview的组件逻辑调整

show you code!

element-ui的组件逻辑调整

app直播商城源码修改的方式和iview的组件类似，不过element-ui中，el-table-column暂时没有做修改。
声明：本文由云豹科技转发自程序猿小新博客，如有侵权请联系作者删除