vue 之 css module的使用方法
来源:SegmentFault
2023-01-18 17:08:00
0浏览
收藏
数据库小白一枚,正在不断学习积累知识,现将学习到的知识记录一下,也是将我的所得分享给大家!而今天这篇文章《vue 之 css module的使用方法》带大家来了解一下vue 之 css module的使用方法,希望对大家的知识积累有所帮助,从而弥补自己的不足,助力实战开发!
动手之前先配置项目,网上很多文章说需要下载css-loader插件,Vue中的vue-loader已经集成了 CSS Modules,因此删掉也能正常运行
在vue.config.js中添加如下配置
`css: {` `loaderOptions: {` `css: {` `localIdentName:` `'[name]__[local]-[hash:base64:5]'``,` `camelCase:` `true` `}` `}` `}`
- localIdentName是格式化类名:name是当前文件名称,local是当前定义的类名名,hash是hash生成的字符串,长度为5
- camelCase:在类名有中横线时,'only'在标签上绑定类名时只支持大驼峰,true:支持大驼峰也支持中括号命名
特别注意:css module所有类名都要:class进行绑定
`` `这是通过less设置的:global字体颜色为粉色``p``>` `这是通过less设置的:local字体大小为40px``p``>` `This should be red``p``>` `类别推荐``h4``>` `类别推荐``h4``>` ```div``>`
样式表需要添加module,可以通过console.log(this.$style);输出当前所有的:local { }类名。默认是:local { },即:local前缀是可以省略的,若要全局类名则资额在:global { }内
`<style module lang='``"less"``'>` `:global {` `.less-color {` `color``: pink;` `}` `}` `:``local` `{` `.less-font-size {` `font-size``:` `40px``;` `}` `.``red` `{` `color``:` `red``;` `}` `.header-tit {` `color``:` `blue``;` `}` `}` `</style>`
效果
和配置一样:当前文件名称,local是当前定义的类名名,hash是hash生成的字符串,长度为5;true:支持大驼峰也支持中括号命名
`` `这是通过less设置的:global字体颜色为粉色``p``>` `这是通过less设置的:local字体大小为40px``p``>` `This should be red``p``>` `类别推荐``h4``>` `类别推荐``h4``>` ```div``>`
后记
过程还是蛮曲折的,小白就是道阻且长啊,不过我相信积少成多,会有蜕变的一天的。
到这里,我们也就讲完了《vue 之 css module的使用方法》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于mysql的知识点!
版本声明
本文转载于:SegmentFault 如有侵犯,请联系study_golang@163.com删除

- 上一篇
- 从零开始实现Vue简单的Toast插件

- 下一篇
- 阿里云腾讯云api
评论列表
-
- 英俊的火龙果
- 很有用,一直没懂这个问题,但其实工作中常常有遇到...不过今天到这,看完之后很有帮助,总算是懂了,感谢师傅分享技术贴!
- 2023-04-09 14:37:32
-
- 小巧的戒指
- 这篇技术文章真是及时雨啊,老哥加油!
- 2023-03-28 04:21:48
-
- 安静的小刺猬
- 很详细,收藏了,感谢老哥的这篇博文,我会继续支持!
- 2023-03-25 16:42:26
-
- 无奈的白羊
- 这篇文章内容真是及时雨啊,好细啊,很有用,已加入收藏夹了,关注大佬了!希望大佬能多写数据库相关的文章。
- 2023-03-16 04:16:25
-
- 独特的发夹
- 太详细了,码起来,感谢作者大大的这篇技术文章,我会继续支持!
- 2023-02-18 20:41:06
-
- 光亮的老鼠
- 这篇技术文章真是及时雨啊,作者加油!
- 2023-02-16 16:46:13
-
- 失眠的冬日
- 这篇文章内容真及时,太详细了,受益颇多,码起来,关注楼主了!希望楼主能多写数据库相关的文章。
- 2023-02-15 17:29:25
-
- 端庄的爆米花
- 这篇技术文章真是及时雨啊,很详细,赞 👍👍,已收藏,关注师傅了!希望师傅能多写数据库相关的文章。
- 2023-02-14 19:17:14
-
- 爱撒娇的吐司
- 这篇文章内容出现的刚刚好,细节满满,很好,码起来,关注大佬了!希望大佬能多写数据库相关的文章。
- 2023-02-09 03:37:00
-
- 发嗲的火车
- 太全面了,已收藏,感谢大佬的这篇文章,我会继续支持!
- 2023-02-08 02:53:57
-
- 甜蜜的白昼
- 很有用,一直没懂这个问题,但其实工作中常常有遇到...不过今天到这,看完之后很有帮助,总算是懂了,感谢大佬分享文章内容!
- 2023-02-05 08:05:19
-
- 幽默的皮带
- 很棒,一直没懂这个问题,但其实工作中常常有遇到...不过今天到这,帮助很大,总算是懂了,感谢大佬分享博文!
- 2023-01-30 01:03:30
-
- 含蓄的百褶裙
- 这篇博文太及时了,细节满满,感谢大佬分享,收藏了,关注up主了!希望up主能多写数据库相关的文章。
- 2023-01-29 06:40:43
-
- 美好的麦片
- 赞 👍👍,一直没懂这个问题,但其实工作中常常有遇到...不过今天到这,看完之后很有帮助,总算是懂了,感谢楼主分享文章!
- 2023-01-27 04:22:48
-
- 激昂的绿草
- 这篇文章真及时,很详细,很有用,mark,关注大佬了!希望大佬能多写数据库相关的文章。
- 2023-01-21 11:46:14
-
- 冷傲的心情
- 这篇技术贴出现的刚刚好,博主加油!
- 2023-01-19 07:01:58
查看更多
最新文章
-
- 数据库 · MySQL | 1天前 |
- MySQL设置中文界面,超简单教程来了!
- 332浏览 收藏
-
- 数据库 · MySQL | 1天前 | mysql 索引提示
- MySQL进阶必看!FORCE/USE/IGNOREINDEX用法大揭秘
- 182浏览 收藏
-
- 数据库 · MySQL | 1天前 |
- 手把手教你写MySQL存储过程,小白也能轻松上手
- 163浏览 收藏
-
- 数据库 · MySQL | 1天前 | mysql group by
- MySQL分组查询优化:GROUPBY原理+索引优化超全解析
- 324浏览 收藏
-
- 数据库 · MySQL | 1天前 |
- MySQL设置中文语言,轻松拥有中文界面
- 211浏览 收藏
-
- 数据库 · MySQL | 1天前 |
- MySQL建库语句从入门到精通:创建数据库+设置字符集&排序规则(附实例)
- 176浏览 收藏
-
- 数据库 · MySQL | 1天前 |
- 从零开始学MySQL数据库操作,小白轻松变大神!
- 496浏览 收藏
-
- 数据库 · MySQL | 1天前 |
- MySQL插入日期到时间字段,轻松搞定日期格式
- 484浏览 收藏
-
- 数据库 · MySQL | 1天前 | mysql 数据压缩
- MySQL怎么实现高效压缩存储?表压缩+列式存储详细解读
- 272浏览 收藏
-
- 数据库 · MySQL | 1天前 | mysql JOIN优化
- MySQL优化JOIN操作:七大技巧教你提升关联查询速度
- 106浏览 收藏
-
- 数据库 · MySQL | 1天前 |
- MySQL出现中文乱码?超详细解决方案一次性搞定
- 211浏览 收藏
-
- 数据库 · MySQL | 1天前 |
- MySQL主从复制这样配!搞懂这些参数,replication稳了~
- 131浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 508次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
查看更多
AI推荐
-
- 茅茅虫AIGC检测
- 茅茅虫AIGC检测,湖南茅茅虫科技有限公司倾力打造,运用NLP技术精准识别AI生成文本,提供论文、专著等学术文本的AIGC检测服务。支持多种格式,生成可视化报告,保障您的学术诚信和内容质量。
- 19次使用
-
- 赛林匹克平台(Challympics)
- 探索赛林匹克平台Challympics,一个聚焦人工智能、算力算法、量子计算等前沿技术的赛事聚合平台。连接产学研用,助力科技创新与产业升级。
- 50次使用
-
- 笔格AIPPT
- SEO 笔格AIPPT是135编辑器推出的AI智能PPT制作平台,依托DeepSeek大模型,实现智能大纲生成、一键PPT生成、AI文字优化、图像生成等功能。免费试用,提升PPT制作效率,适用于商务演示、教育培训等多种场景。
- 58次使用
-
- 稿定PPT
- 告别PPT制作难题!稿定PPT提供海量模板、AI智能生成、在线协作,助您轻松制作专业演示文稿。职场办公、教育学习、企业服务全覆盖,降本增效,释放创意!
- 53次使用
-
- Suno苏诺中文版
- 探索Suno苏诺中文版,一款颠覆传统音乐创作的AI平台。无需专业技能,轻松创作个性化音乐。智能词曲生成、风格迁移、海量音效,释放您的音乐灵感!
- 57次使用
查看更多
相关文章
-
- golang MySQL实现对数据库表存储获取操作示例
- 2022-12-22 499浏览
-
- 搞一个自娱自乐的博客(二) 架构搭建
- 2023-02-16 244浏览
-
- B-Tree、B+Tree以及B-link Tree
- 2023-01-19 235浏览
-
- mysql面试题
- 2023-01-17 157浏览
-
- MySQL数据表简单查询
- 2023-01-10 101浏览