浅谈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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
关于cookie的初识和运用(js和jq)
Apr 07 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 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使用异或实现的加密解密实例
2013/09/04 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP正则验证Email的方法
2015/06/15 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
php生成微信红包数组的方法
2019/09/05 PHP
javascript实现上传图片前的预览(TX的面试题)
2007/08/20 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python多线程下载文件的方法
2015/07/10 Python
Python time库基本使用方法分析
2019/12/13 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
pytorch查看通道数 维数 尺寸大小方式
2020/05/26 Python
python搜索算法原理及实例讲解
2020/11/18 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
模范教师事迹材料
2014/02/10 职场文书
六年级小学生评语
2014/12/26 职场文书
员工辞职信怎么写
2015/02/27 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL