首页vue公用的css放在哪里

vue公用的css放在哪里

时间: 2023-03-31 20:02:01 浏览: 805

vue 引入公共css文件的简单方法(推荐)

Vue 引入公共 CSS 文件的简单方法在 Vue 项目中，引入公共 CSS 文件是一个非常重要的步骤。今天，我们将分享三种简单的方法来引入公共 CSS 文件，以便提高开发效率和代码维护性。方法一：在入口 js 文件中引入在入口 js 文件（通常是 main.js）中，我们可以使用 import 语句来引入公共的 CSS 文件。例如： ```javascript import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' import '@/assets/css/reset.css' /* 引入公共样式 */ ``` 这样，在应用程序启动时，公共的 CSS 文件将被加载。方法二：在 index.html 中引入我们也可以在 index.html 文件的头部中使用 link 标签来引入公共的 CSS 文件。例如： ```html <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>y</title> <link rel="stylesheet" type="text/css" href="src/assets/css/reset.css" rel="external nofollow" >/*引入公共样式*/ </head> ``` 这样，在浏览器加载 index.html 文件时，公共的 CSS 文件将被加载。方法三：在组件中引入我们可以在组件中使用 @import 语句来引入公共的 CSS 文件。例如： ```vue <template> <div id="app">  </div> </template> <script> export default { name: 'app' } </script> <style> @import './assets/css/reset.css'; /* 引入公共样式 */ </style> ``` 需要注意的是，在组件中引入公共 CSS 文件可能会导致 index.html 文件的头部多出一个空的标签。小结在 Vue 项目中，引入公共 CSS 文件是非常重要的。我们可以使用三种方法来引入公共 CSS 文件，包括在入口 js 文件中引入、在 index.html 中引入和在组件中引入。每种方法都有其优缺，选择哪种方法取决于项目的具体需求。

通常情况下，Vue 公用的 CSS 可以放在一个单独的 CSS 文件中，然后在 Vue 组件中通过 import 引入。另外，也可以在 Vue 组件中使用 scoped CSS，这样可以确保样式只作用于当前组件，不会影响到其他组件。

阅读全文

最新推荐

vue公用的css放在哪里

相关推荐

vue项目中公用footer组件底部位置的适配问题

vue+layout+路由布局简单项目例子

vue引入公用css

uniapp公用css样式

【Vue2 + ElementUI】分页el-pagination 封装成公用组件

Vue开发规范

vue_template_h5:使用vue的h5模板

vue-introjs.zip

vue-element-response-demo：基于Vue + Element的响应式后台模板

快速搭建Vue前端项目：vue-element-admin实践

Vue-cli搭建移动端H5模板：vue-mobile详解

vue config 别名

vue中import用法

requirejs + vue 项目搭建详解

vue项目用HBuilder打包APP.docx

Backstage-management-system:element以及vue和echarts建立管理系统。使用element ui和vue 2.5和echarts实现一个响应式后台管理系统

Vue项目脚手架搭建与功能详解

vue中@import的作用

最新推荐

解决Vue打包上线之后部分CSS不生效的问题

Vue cli 引入第三方JS和CSS的常用方法分享

vue cli3适配所有端方案的实现

使用Vue组件实现一个简单弹窗效果

Vue单页应用引用单独的样式文件的两种方式

俄罗斯RTSD数据集实现交通标志实时检测

管理建模和仿真的文件

预测区间与置信区间：机器学习中的差异与联系

基于KNN通过摄像头实现0-9的识别python代码

易语言开发的文件批量改名工具使用Ex_Dui美化界面