浅谈vue中改elementUI默认样式引发的static与assets的区别


Posted in Javascript onFebruary 03, 2018

首先从这说起 vue项目中的elementUI的默认样式怎么改

由于elementUI的样式太单调,比如这个slider滑块

浅谈vue中改elementUI默认样式引发的static与assets的区别

elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色。?没办法。拿人钱财替人消灾。

我试着在写的组件中直接去更改这个slider的颜色,发现根本不能直接改?。有意思?。

我们分析一下:当我们想要更改某个元素的css样式时,只要找到元素具体的class去更改样式的思路肯定是没问题,既然不生效,那么肯定是没找到这个元素的确切位置,浏览器搜索不到这个class,所以直接修改才不生效。

此刻突然想到style中的scoped属性,scoped这个属性限制了下面css代码的作用域只在当前组件中生效,此时直接去更改elementUI的属性,浏览器搜索不到这个元素的最外层的父级,于是这个东西就不会生效。嗯,没错。

那么我们可以像传统的html页面外部引入css样式那样,单独建一个css文件去更改elementUI样式就可以了。那么问题来了

这个css文件放在哪里呢?

vue中有个src下的assest文件是放静态资源的,还有个与src文件同级的static文件也是放静态资源的,这两个文件有什么区别呢?

我修改的elementUI的元素的css文件应该放在哪个文件假下面呢?

浅谈vue中改elementUI默认样式引发的static与assets的区别

google一下之后了解到

区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了

区别二:assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入,而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入,

总结一下

1.assets最好用来放置样式、字体文件和图片等公共静态资源,只要src下面的组件中用到的资源就放在assets中

2.在项目中,经常会用带一些没有npm包的第三方插件,放在static中

对,就这样!

以上这篇浅谈vue中改elementUI默认样式引发的static与assets的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
Node.js Buffer用法解读
May 18 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 #Javascript
vue+webpack实现异步组件加载的方法
Feb 03 #Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 #Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 #Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 #Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 #Javascript
JavaScript实现求最大公共子串的方法
Feb 03 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
基于ThinkPHP实现批量删除
2015/12/18 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
django query模块
2019/04/20 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
文案策划求职信
2014/03/18 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
服务整改报告
2014/11/06 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs