vue 脚手架 scoped样式

最新推荐文章于 2024-03-19 20:54:54 发布
最新推荐文章于 2024-03-19 20:54:54 发布
阅读量354 收藏
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/118967065
版权

要点：

 

先引入两个组件

 

平常我们这样写样式再School组件上写

 

但是组件中各写的样式会被汇总在一起,也就是如果两个组件中写了相同class命名的样式就会有冲突

验证：

再在student组件上也写入demo的样式

运行发现样式被覆盖了

因为在app引入子组件的时候,先引用的是蓝色背景色的school组件,然后是橙色背景色的student组件,当引入student组件的时候把相同名字样式给覆盖掉了,所以最后才显示了只有橙色

 

 

验证：是被覆盖了

换一下引用的顺序

 

不是看使用的顺序而是看引用的顺序

 因为vue的cli脚手架的话,是先看引入在看配置对象,最后才看body里面内容

 

解决方法：
在style上加一个scoped 表示这个样式只用于这个组件,就不会导致最后组件间样式的覆盖了

就是把这个style样式限制住了

发现页面显示正常

 

 分析怎么实现的它在div上加入一个特定的标签属性,而且后面的数字是唯一的,然后样式名demo和这个标签属性组合,就形成了一个独一无二的样式名,就不会被覆盖了

但是在有一个组件上用scoped不太好就是在app组件上它是一个一人一下万人之上的角色

如果在app组件里定义一个样式

 然后在其他组件中都可以添加这个样式

在两个组件中都写上

都有样式,这是没有加scoped的时候

 

 但如果在app的style上也加上scoped的话

会发现样式就没应用了,也就是说只有app.vue里面才能使用app的样式了

但是一般开发时,在app里面写的样式都是很多组件会重复使用到,所以一般在app里面都不会加scoped

然后

这个lang时langue的简写,表示用什么形式去写这个样式有less 和css两种

 

 

但是如果你没装less-loader就会报错,因为脚手架创建项目没有配置能识别less

 

 安装

 

 但是发现报错

 这边是一个兼容性的问题

 

我们知道脚手架是依托webpack的，现在webpack版本有5版本了，但是vue的脚手架安装的是

4的最新版本

 

 因为less-loader如果直接npm i less-loader的话,就会安装less-loader的最新版本,也就是8 和9版本但是8和9版本是迎合webpack5版本的所以你用在脚手架中直接装less-loader就会报错

 

用这个指令就能看对应有什么版本

 

 

所以不要安装8也不要安装9 因为这是迎合webpack5的

所以使用 npm i less-loader@7 

表示安装less-loader7版本里面的最新版本

 

安装成功 

 

发现写less也不报错 ,less可以嵌套着写

 

 不写lang的话默认就是css

总结：

 

 

 

 

兜里揣着星星
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue脚手架安装，分析
06-09
Vue CLI（命令行接口）是Vue.js的官方脚手架工具，它简化了项目初始化、配置和开发流程，让开发者可以快速搭建Vue应用。本篇文章将详细介绍Vue CLI的安装过程，并进行简单的组件分析。 首先，我们来安装Vue CLI。...
Vue学习踩坑之scss ＜style lang= “scss“ scoped＞
baidu_37132424的博客
12-06 2994
scoped局部部署，只在本页面生效，不写的话内部的css样式会在所有组件中渲染，浪费啊 我是直接下载的最新的6.0.1 ，结果入坑了 pm install node-sass --save-dev 如上图所述，请使用低版本4.0.0+的，那就卸载了，安装个低版本的呗 npm uninstall node-sass 卸载以后开始下载4.14.1版本的 npm install node-sass@4.14.1 --save-dev 好吧，小白一枚，一直以为是python3导致的问题，瞅.
针对scoped的理解
weixin_44195250的博客
09-06 149
虽然样式写的是蓝绿黄红，但是因为对page没有进行有区分的命名，这时候就用到了scoped scoped作用： scoped用法
Vue学习——scoped样式
小缘同学的博客
03-28 1697
作用：让样式在局部生效，防止冲突 写法：<style scoped> 总结：可以防止在两个组件中使用了相同名字的style样式而导致后面引入的样式覆盖了前面的样式的冲突，但在App.vue文件中最好不要使用，因为App.vue通常存放所有的style样式，大多数情况都是用来在全局使用的。此外可以使用npm view webpack versions命令查看webpack的历史版本，使用npm iless-loader@版本号配置less-loader，当ledd-loader版本高于we..
vue - 深入理解vue中的scoped属性
qq_43886365的博客
03-13 6016
1， vue中的 `scoped` 属性，其实就是给每一个dom节点元素都添加了不重复的自定义属性（如：data-v-6810cbe5）； 2，然后编译时再给样式的末尾添加`属性选择器`进行样式私有化（如.btn[data-v-6810cbe5]）
Vue学习之--------Scoped样式（2022/8/1）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
08-01 557
Scoped样式（
基于vue脚手架的音乐播放器
12-18
在本项目中，“基于vue脚手架的音乐播放器”是一个使用Vue.js框架，特别是借助Vue CLI工具构建的Web应用程序。Vue CLI是一个命令行界面工具，它为Vue.js开发提供了快速设置和配置环境的能力，包括自动创建项目模板、...
基于vue脚手架20详细讲解项目搭建
08-09
另一个常见问题是CSS样式冲突，合理使用` scoped`属性和CSS模块化可以帮助解决这个问题。 文件`vue-admin-step-by-step-master`看起来像是一个完整的Vue项目模板，可能包含了一个完整的后台管理系统搭建步骤。在...
在vue脚手架上写第一个组件
04-18
Vue脚手架（Vue CLI）提供了一个快速设置的开发环境，使得这个过程变得简单高效。让我们深入了解一下如何在Vue CLI上创建并使用你的第一个组件。 首先，确保你已经安装了Vue CLI。如果还没有，可以通过以下命令全局...
VUE3脚手架工具cli搭建配置及路由使用
最新发布
06-14
### VUE3脚手架工具CLI搭建配置及路由使用 #### 一、VUE CLI工具安装与配置 **1.1 安装 Node.js 和 npm** - **下载 Node.js**: 访问官网 [https://nodejs.org/en](https://nodejs.org/en/)，选择适合您操作系统的...
Vue style中的 scoped 属性
qq_40792800的博客
07-26 3581
用来隔离样式 -- Scoped CSS一个是在编译之后，直接在 DOM 节点上给类名增加一个hash后缀，不会在节点上增加自定义属性用来隔离样式，且DOM节点与样式文件展示类名一致 -- CSS Modules。这样一对比，发现 CSS Modules 是更好用一点哈。所以在。
vue组件中的样式属性--scoped
一个慢的博客
12-07 2万+
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。 vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的:<style scoped> .example { color: red; } </style><template> <div
vue的scoped 样式隔离，样式穿透，及细节
凝涵的博客
11-22 3142
先说环境吧：vue 3.2.45，也试过vue 3.2.16。
vue 3 第二十六章：样式（scoped、深度选择器、全局选择器、css modules、自定义注入名称、css中v-bind）
to_the_Future的博客
05-25 4211
在 Vue 中，我们可以使用scoped特性来给组件的样式添加作用域。通过为组件的标签添加scoped特性，我们可以确保组件的样式仅应用于该组件的模板中，而不会影响其他组件或全局样式。
Vue（八）vue 脚手架、脚手架创建项目示例
热门推荐
商务合作 | 共同学习 | 携手共进
11-06 7万+
vue：脚手架的搭建和运行，脚手架文件结构，避免样式冲突，懒加载，第一个Vue项目示例。
Vue中style scoped属性的作用和原理以及scoped穿透
上庸者-不服周
11-03 3485
在vue组件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。注意：实际开发中，建议在每个组件的 style 身上都加上 scoped 属性。原选择器[data-v-xxxx]
vue 样式标签使用 scoped
fgghn的博客
04-02 958
vue 样式标签使用 scoped 防止组件css污染问题
Vue2（八）：脚手架结构、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式
m0_73560798的博客
03-19 1160
定义在另一个js文件中，这里定义在mixin.js中methods: {},console.log('混合里的mounted优先调用');可以在另一个js中配置插件，然后通过import引入到main.js中看看下面的代码，复习复习之前的知识//第一个参数是Vue构造函数//后面的参数是使用者传进来的东西123//1.定义一个全局过滤器//返回值别忘了});//2.定义一个全局自定义指令,元素默认获取焦点},el.focus();},})
Vue组件化学习之scoped
qq_40837310的博客
02-15 381
简介 主要介绍scoped的作用。 先弄一个案例： main.js： //引入vue依赖 import Vue from 'vue' //引入组件App import App from './App.vue' // 关闭生产提示 Vue.config.productionTip = false //创建一个vue实例 new Vue({ //这个目前还没学过，先知道他的作用是将app放入容器中。 render: h => h(App), //配置该vue实例管理id为app的容器
Vue脚手架搭建音乐播放器流程
05-22
以下是使用Vue脚手架搭建音乐播放器的流程： 1. 创建Vue项目：在终端中进入你想要创建项目的目录，然后运行以下命令： ``` vue create music-player ``` 这将会创建一个名为 `music-player` 的新Vue项目。 2...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值