浅谈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抽奖实现随机抽奖代码效果
Dec 02 Javascript
javascript读写json示例
Apr 11 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
JS实现简单日历特效
Jan 03 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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/03/24 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
python实现各进制转换的总结大全
2017/06/18 Python
python编程羊车门问题代码示例
2017/10/25 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
Python通过字典映射函数实现switch
2020/11/06 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
简历自我评价怎么写呢?
2014/01/06 职场文书
幼儿园门卫制度
2014/01/29 职场文书
会计专业自我评价
2014/02/12 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
小学优秀学生评语
2014/12/29 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
学生安全责任协议书
2016/03/22 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
python的变量和简单数字类型详解
2021/09/15 Python