热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue.js引入css(vuejs引入外部js文件并使用)

本文目录一览:1、vue+css实现夜间模式2

本文目录一览:


  • 1、vue+css实现夜间模式


  • 2、Vue如何引入外链css和js


  • 3、Vue怎么局部引入css


  • 4、解决vuejs项目里css引用背景图片不能显示的问题


  • 5、为什么在vue的main.js中引入css或者报错,不引入没问题

vue+css实现夜间模式

最近项目中要求实现夜间模式,整理一下实现方法。

ps. 我们的项目是混合开发,所以夜间模式要通过原生交互实现,如果直接是h5项目,则可省去原生交互这块。

step1 原生交互方法

step2  获取模式方法

step3 实现方法

1、使用css大类区分

2、针对不同class类定义css属性全局变量

3、全局引入样式文件(main.js中引入)

4、页面中可定义css私有变量(包含页面中特殊的颜色属性,不止涉及亮度更改的图片)

        变量定义规范:--(页面名称)-自定义

        建议将白天与夜间模式图片区分两个文件夹存储

5、变量使用规范

总结:

1、注意css变量的使用的兼容性,例如安卓5的手机可能识别不了变量,解决方法:postcss可以试试看

2、如果项目中已使用less,可直接用less来实现,现未发现其兼容性问题(下一篇文章我会写less实现夜间模式)

Vue如何引入外链css和js

直接在主页面里面引入就行,但要注意class名和ID名不要出现重复,因为Vue是单页面,就是把所有组件都添加到主页面上进行显示的,所以引入的路径也要写关于主页面的相对路径

Vue怎么局部引入css

vue只是一个js框架,和你引用css没有太大的关系,和普通的js一样的处理方式就好。

例如你可以新建一个link标签,然后插入到head标签下之类的。

解决vuejs项目里css引用背景图片不能显示的问题

解决:build-utils.js里,修改:增加

publicPath:'../../',

if

(options.extract)

{

return

ExtractTextPlugin.extract({

use:

loaders,

publicPath:'../../',

fallback:

'vue-style-loader'

})

}

else

{

return

['vue-style-loader'].concat(loaders)

}

以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:解决vue打包之后静态资源图片失效的问题解决vue打包css文件中背景图片的路径问题详谈vue+webpack解决css引用图片打包后找不到资源文件的问题vue

cli使用绝对路径引用图片问题的解决关于Vue背景图打包之后访问路径错误问题的解决

为什么在vue的main.js中引入css或者报错,不引入没问题

这种情况很简单,动态添加进去的tr不能应用js和css,在tr添加进页面后,再调用一下$("tr").addClass("样式名");重新给他添加一下样式即可.至于js的话,在绑定事件的时候用:$("tr").live(funtion(){})这样就可以了.


推荐阅读
author-avatar
ccer
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有