vue 引入公共css文件

最新推荐文章于 2024-05-10 15:13:27 发布
最新推荐文章于 2024-05-10 15:13:27 发布
阅读量460 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wandoumm/article/details/80431751
版权

1、在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。

import Vue from 'vue'
import App from './App' // 引入App这个组件
import router from './router' /* 引入路由配置 */
import axios from 'axios'
import '../static/css/global.css' /*引入公共样式*/

2、在index.html中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>stop</title>
    <link rel="stylesheet" href="./static/css/global.css"> /*引入公共样式*/

  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3、在app.vue中引入，但是这样引入有一个问题，就是在index.html的HEADH上会多出一个空的<style></style>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  @import './../static/css/global.css'; /*引入公共样式*/

</style>
wandoumm
关注
专栏目录
vue 导入公共css_vue引入公共css,与less文件
weixin_39713219的博客
02-11 691
步骤一：安装webpac新直能分支调二浏页器朋代说kcnpm install webpack -g步骤二器打好基下是求的响的可域适的一的近重交的：在src/assets下面新建css、js、less、fonts文件夹，并放到二新，为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调现了喜知进入对应文件。将boots能还有都这房搞名移页通带近啥是点是三子清trap.css放...
vue引入公共的css及在对应的模板.vue文件中引入css的方法
lily2016n的博客
04-23 4万+
在我们创建的vue项目中，为了使页面更加简洁，我们通常把公共的css和单个组件的css写道外面单个引入。 文件目录如下 加公共的css ①在main.js中加入@import '../static/css/reset.css'（main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件；App.vue是我们的主组件，所有页面都是在App.vue下...
vue 引入公共css文件的简单方法(推荐)
08-28
下面小编就为大家分享一篇vue 引入公共css文件的简单方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 引入公共样式的三种方法
a378113472的博客
06-06 2819
1、在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。 import Vue from 'vue' import App from './App' // 引入App这个组件 import router from './router' /* 引入路由配置 */ import axios from 'axios' import '../static/css/global.css' /*引入公共样式*/ 2、在index.html中引入 <!DOCTYPE html> <
vue中引入公共样式的方法
weixin_63896561的博客
11-20 1463
公共样式通常包括全局样式和组件样式。
vue项目引入全局css
weixin_44111864的博客
11-18 4344
1.在assets文件夹中创建全局样式表css文件 2.在global.css文件中写入全局样式 /* 全局样式表 */ html,body{ width:100%; height:100%; margin:0; padding:0; } body,p,dl,dd,ul,ol,li,div,h1,h2,h3,h4,h5,h6,form,input,table,tr...
vue引入公用样式
simple5960的博客
10-16 184
<style> @import "../../../common/uni.css"; </style>
vue element 项目默认css文件 style
01-02
一个标准的Vue Element项目会有一个默认的CSS文件，通常命名为`styles`，这个文件用于存放全局样式或者项目的基础样式。`styles`文件一般位于`src`目录下，这是Vue项目的源代码根目录，包含组件、路由、公共样式、...
VUE 引用公共样式
weixin_30279671的博客
06-05 1553
首先创建公共样式文件 在main.js中引用样式 浏览器效果图 转载于:https://www.cnblogs.com/xiaoxiao2017/p/10979025.html
vue3 给全局(每个实例) 添加公共方法
左不言的博客
10-22 1万+
众所周知，vue3，现在不会暴露 Vue 对象给你用了！ 那么该如何给 它的每个子组件实例添加公共的方法呢？ vue2 添加的方法很简单 import Vue from 'vue' Vue.prototype.funcName= function() { ... } vue3 添加公共方法的三种方式 第一种：使用 app.config.globalProperties 添加 import { createApp } from 'vue' import axios from 'axio..
Vue一次性简洁明了引入所有公共组件的方法
10-17
主要介绍了Vue一次性简洁明了引入所有公共组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vuejs优化之install全局引入公共样式的方法
grr1640610995的博客
07-02 256
自定义index.js文件中引入组件 在main.js中全局注册公共样式
vue3之vite创建h5项目之2 （sass公共样式、声明组件、路由配置和layout组件 ）
weixin_47409897的博客
04-28 4311
1-2 vite.config.ts 引入公共样式方式2 1-3样式文件 1-3-1 src / style / index.scss ( 适配iphonex等还有引入其他公共的样式 ) 1-3-2 src / style / mixin.scss （ 公共样式方法抽离 ） 1-3-3 src / style / reset.scss （ 重置样式 ） 1-3-4 src / style / variables.scss （ 定义的公共变量样式 ） 1-3-5 使用变量 2：声明组件 否则t
VUE 引入公共css样式的方法
ikceo1211的博客
11-23 9685
初学vue，在项目中引入公共css样式的时候发现在index.html页面直接使用  &lt;link rel="stylesheet" type="text/css" href="./src/css/index.css"&gt;  引入样式是无效的，通过查阅资料得知这么引入需要css文件在static文件夹下（具体原因我也不清楚，百度有说config文件中index.js文件的  assetsS...
Vue3添加公共方法并使用
weixin_43814775的博客
02-28 1681
Vue 3 添加公共方法并使用
Vue项目：style样式篇
热门推荐
happy81997的博客
12-17 5万+
目录 一、动态使用样式 二、全局公共css样式文件 2.1 main.js中引入 2.2 index.html引入 三、单个vue文件中引入样式 四、样式作用范围控制 4.1 scoped私有作用域 4.2 混合使用 4.3 深度作用选择器 4.4 动态生成的dom的样式 一、动态使用样式 使用场景：根据不同的值使用不同的样式，或者给样式某个属性设置一个变量值 使用方法：...
Vue如何引入公用方法
最新发布
fmk1023的博客
05-10 754
是一种分发Vue组件中可复用功能的非常灵活的方式。当组件使用mixin对象时，所有mixin对象的选项将被“混合”进入该组件本身的选项。如果你的公用方法非常通用，并且你想在多个项目中重复使用，你可以考虑将它们打包成Vue插件。Vue插件的范围没有严格的限制——具有一对公开方法。上可能会导致在大型项目中难以追踪方法的来源。因此，这种方法在小型或中型项目中可能更为适用。文件中引入并注册你的公用方法，使得它们可以在整个Vue应用中使用。如果你只需要在特定的组件中使用公用方法，你可以直接在组件的。
关于vue引入公共方法的用法
qq_34498048的博客
12-03 259
1.es6方式建立文件 2.main.js中引入 3.项目中直接使用
vue封装公共的css样式
08-31
在Vue中封装公共的CSS样式可以通过以下几个步骤实现： 1. 创建一个新的CSS文件，在其中定义公共样式。可以使用任何命名约定，比如`common.css`或者`global.css`。 2. 在Vue项目中引入该CSS文件。有多种方式可以实现，最常见的是在入口文件（比如`main.js`）中引入该文件： ```javascript import '@/assets/css/common.css'; ``` 这里假设你将公共CSS文件放在`src/assets/css/`目录下。 3. 在Vue组件中使用公共样式。你可以直接在组件的模板中使用CSS类名，这些类名在公共CSS文件中进行定义。例如： ```html <template> <div class="my-component"> <!-- 组件内容 --> </div> </template> <style> .my-component { /* 使用公共样式 */ color: blue; font-size: 16px; } </style> ``` 这里`.my-component`是公共CSS文件中定义的一个样式类名。 通过这种方式，你可以将公共的CSS样式封装到一个文件中，并在需要的地方引用和使用它。这样可以提高代码的可维护性和重用性，同时也能保持样式的一致性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值