浅谈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 相关文章推荐
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
微信小程序支付前端源码
Aug 29 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 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
php异步多线程swoole用法实例
2014/11/14 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
js获取ip和地区
2017/03/10 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
python抓取百度首页的方法
2015/05/19 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
快速创建python 虚拟环境
2020/11/28 Python
python中pivot()函数基础知识点
2021/01/03 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
最热门的自我评价
2013/12/30 职场文书
作风整顿剖析材料
2014/09/30 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
庆六一开幕词
2015/01/29 职场文书
圣诞晚会主持词
2015/07/01 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书