vue项目中创建全局class样式类并使用!

最新推荐文章于 2024-04-08 08:36:37 发布
最新推荐文章于 2024-04-08 08:36:37 发布
阅读量2.1k 收藏 3
点赞数 2
分类专栏： Vue.js 文章标签： vue 前端 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46156566/article/details/112990337
版权

首先我们在src文件里面新建一个style文件夹，根据个人习惯来，放在assets文件夹下面也可以,然后在创建一个index.scss文件，如下图

在这里插入图片描述

接下来就是添加class样式了，简单添加几个，如下图

在这里插入图片描述

接下来是引入全局样式

在这里插入图片描述

引入后就可以在页面中任何地方随意调用了,使用方法如下图，直接调用

在这里插入图片描述

前端攻城狮路飞
关注
专栏目录
全局CSS样式——代码+表格
weixin_46252857的博客
05-29 309
需要标记的代码一行解决，和带你看看怎么用Bootstrap做出来的表格如何的好看且省代码 1、代码 01、内联代码：通过<code>标签包裹内联样式的代码片段 02、 用户输入：通过<kbd>标签标记用户通过键盘输入的内容 03、 基本代码块：           多行代码可以使用<pre>标签       &
在vue项目中优雅的使用SVG的方法实例详解
10-17
在Vue项目中优雅地使用SVG图标，可以极大地提升项目的可维护性和扩展性。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，因其轻量级和可缩放特性，在Web开发中被广泛使用。相较于传统的图标字体和...
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
10-14
主要介绍了Vue 实现创建全局组件,并且使用Vue.use() 载入方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 如何给每个页面添加一个全局的className
Zhooson的博客
09-14 2204
vue 如何给每个页面添加一个全局的className
Vue中设置class类样式
最新发布
2301_76232361的博客
04-08 548
可以发现:class="[‘thin’,‘red’,‘italic’,‘active’]"的写法和class="thin red italic active"的效果时一样的，甚至。2、三元表达式。
vue 动态添加class类名
漫天随飞雪的博客
09-09 2041
<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：boolean值 --> <!-- 对象的形式: 用花括号包裹起来，类名用引号， --> <!-- 优点: 以对象的形式可以写多个，用逗号分开 --> <p :class="{'p1' : true...
vuejs创建类
lvlemo的博客
10-12 1万+
创建类 song.jsexport default class Song{ constructor({id,mid,singer,name,album,duration,image,url}){ this.id = id this.mid = mid this.singer = singer this.name = name
在vue项目中使用Jquery-contextmenu插件的步骤讲解
10-17
3. 在`main.js`中还需要引入Jquery-contextmenu的样式文件，以便在Vue项目中使用该插件的样式。可以通过`import`语句引入对应的CSS文件： ```javascript import 'jquery-contextmenu/dist/jquery.contextMenu.css'...
vue-cli初始化项目中使用less的方法
10-18
Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建现代化的 Vue.js 开发环境。它提供了许多自动化构建任务，如自动...希望本篇文章的内容对你在 Vue 项目中使用 Less 有所帮助，如果有任何疑问，欢迎继续交流探讨。
vue项目中使用ztree树形插件.pdf
03-09
本文将详细介绍如何在Vue项目中集成ZTree插件，并通过请求后台数据来动态渲染DOM，以实现树形结构的展示。 #### 一、环境准备与依赖安装 在正式开始之前，确保您的Vue项目已经搭建完成。接下来，按照以下步骤进行...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
全局直接使用js调用 this.$confirmation() 调用通用提示弹窗可二次封装 点击确认取消后 会有相应的回调 利用的Promise封装的
vue component created没有触发_Vue 全局数据管理-Vuex
weixin_39636079的博客
11-25 340
Vuex就是专为 Vue.js 应用程序开发的数据读写工具参考官方文档开始 | Vuex​vuex.vuejs.orgstate就是数据mutations就是对数据的改动commit就是调用mutations里的操作（以字符串的形式）与vue不同它需要通过commit来触发事件Vue.use(Vuex)会在Vue的原型上绑定一个共用属性，把store绑到Vue.prototype上Vue.prot...
Vue.extend创建vue子类
米 柴的博客
07-31 381
Vue创建子类并且实例化
Vue 全局导入 JS 方式以及对 ClassName 进行增删扩展
卡尔特斯
10-22 528
通过在 Vue 项目中的 main.js 文件中进行导入： // 节点操作JS import node from '@/utils/node.js' // 注意这行代码需要放到所有的 import 代码之后，否则会报错，Vue 无法允许在任何 import 之前使用 Vue 对象 // $ 符号主要就是为了区分属性，可用可不用，但是Vue所有的自带属性都有 $，主要就是为了区别自带与普通属性的区别，相当于Vue内定的默认书写规则，这样写更清晰明了。 Vue.prototype.$node = node 错
vue 单独js文件中创建类并在组件中引用
k_e_vi_n的博客
02-09 2315
如标题所述的问题在百度上搜索竟大多是语焉不详，可能是问题太过低级大佬们都不屑一讲，那我只能自己记录一下了 1、vue项目中新建model.js文件 2、在model.js中定义Person类 和 返回实例的工厂函数 export default class Person { constructor(first,last) { this.firstName = first this.lastName = last } } export function ...
vue css公用class
weixin_40461134的博客
06-02 311
把自己最近常用的公用class整理一下。
vue导入全局css_vue中如何引入全局样式或方法
weixin_39585761的博客
12-20 2596
vue中我么会经常用到通用的一些全局的方法，如何左才能实现全局的复用减少代码累赘呢？我们一般将公用的方法分装再utils.js文件中，然后再main.js主入口文件中将utils.js中的公共的方法通过@import引入进来即可，或者我们通过再main.js中设置Vue.prototype.xxx = function () {};来设置全局通用的 方法；样式的复用也是一样的道理，我们可以通过再a...
vue设置全局样式：loadOptions
qq_41617861的博客
10-10 6339
vue设置全局样式：loadOptions设置
vue 引入自定义全局css和js
热门推荐
liuxing393724034的博客
06-22 2万+
vue 引入自定义css 和js 一. 引入自定义js 方法一 首先在main.js中引入： import Comjs from './js/common.js' //引入公用js Vue.prototype.$comjs = Comjs; //添加到vue属性中 自定义js 中写： const comjs = { } comjs.title = fun...
Vue项目中的SVG图标使用策略
通过这种方式，项目中的SVG图标管理变得简洁且高效，使得在vue-cli3构建的Vue项目中使用SVG图标变得更为便捷。开发者只需要将SVG文件放入`icons/svg`目录，然后在需要的地方使用全局注册的`SvgIcon`组件即可。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端攻城狮路飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值