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

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

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

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文件应该放在哪个文件假下面呢?

google一下之后了解到

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

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

总结一下

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

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

对,就这样!

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

您可能感兴趣的文章:

  • vue 2.0项目中如何引入element-ui详解
  • 利用vue+elementUI实现部分引入组件的方法详解
  • Vue2.0 UI框架ElementUI使用方法详解
时间: 2018-01-31

利用vue+elementUI实现部分引入组件的方法详解

前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型. 两者各有优缺点,不多评论,根据自己的需求,我最后使用了Element.因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有

Vue2.0 UI框架ElementUI使用方法详解

今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+

vue 2.0项目中如何引入element-ui详解

前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

vue学习笔记五:在vue项目里面使用引入公共方法详解

今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台

Vue 2.0入门基础知识之内部指令详解

1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

Vue 2.0 侦听器 watch属性代码详解

用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

vue.js2.0 实现better-scroll的滚动效果实例详解

什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里 .better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等. <template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWr

如何在原有Android项目中快速集成React Native详解

前言 RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快速开发App ④ iOS&Android大部分代码通用 ⑤ code-push能做热更新,但是用不好依旧坑 ...... 在得到一些信息后,可以看出,要用RN高效率的做出比较不错的App是有可能的,单看投入度与最初设计是否合理,而且现在关于React Native的各种文档是相当丰富的,所以这个阶段想切入RN可能是一个不错的选择.

如何批量测试Mybatis项目中的Sql是否正确详解

去Oracle行动 最近公司要发展海外项目,所以要将现有的系统全部平移过去,另外数据库也要从原来的Oracle变为Mysql.公司的数据库交互层面使用的是Mybatis,而Oracle与Mysql也有一些语法上的不同.所以在项目中的Sql要改动,但是多个项目中涉及到的Sql非常多,如果仅凭人工一条一条辨别的话,工作量有点大.所以就萌发出了直接将数据源变为Mysql,利用反射批量执行Mapper中的方法,然后如果有参数的话,就设置为默认的初始值,然后记录下来成功的数据和失败的数据,这样就可以根据失

iOS 项目中的version和build 详解

iOS 项目中的version和build Version在plist文件中的key是"CFBundleShortVersionString",标识应用程序的发布版本号,和AppStore上的版本号保持一致.该版本的版本号是三个分隔的整数组成的字符串.第一个整数代表重大修改的版本,如实现新的功能或重大变化的修订.第二个整数表示的修订,实现较突出的特点.第三个整数代表维护版本 Build在plist文件中的key是"CFBundleVersion",标示(发布或者未发

Spring MVC项目中log4J和AOP使用详解

前言 日志处理是每个项目当中一个非常重要的内容.没有了日志,也就失去了对系统的可控性.没有日志,系统出现任何问题,都会没有踪迹可寻,这对一个信息系统而言是非常危险的. 项目中需要将service中的类方法的调用过程,使用log4j日志记录. service中的类和方法都很多,不可能在每个类中单独添加log4j日志记录的功能,因此我们在这里使用AOP的思想进行横向切面. 以service类中的方法为切入点,通过AOP在方法调用前后使用log4j输出日志,内容包括正在调用的类和方法名. 在配置过程中

React中如何引入Angular组件详解

前言 为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能.而为了使用它,我得再次使用一次 customEvent ,而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂.在这部分的代码进一步恶化之前,我得尝试有没有别的方式.于是,我想到了之前在其它组件中使用的 Web Components 技术,而 Angular 6 正好可以支持. 下面话不多说了,来一起看看详细的介绍吧 HTML 中引入 Web Components 我所需要做的事情也相当的简单,只需要将