首页 web前端 js教程 Vue的单页应用怎么引用样式文件

Vue的单页应用怎么引用样式文件

Apr 08, 2018 pm 05:00 PM
引用 怎么 样式

这次给大家带来Vue的单页应用怎么引用样式文件,Vue的单页应用引用样式文件的注意事项有哪些,下面就是实战案例,一起来看一下。

问题描述

对于.vue的文件来说,也是由结构、行为、样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式。下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分

引入单独的样式文件

方式一

在main.js中引入静态资源,这种方法使得该样式文件被项目中的组件所共享

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
// 此处引入静态资源
require('./assets/css/style.css')
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})
登录后复制

方式二

在某个.vue引入样式文件

<template>
  ...
</template>
<script>
  export default {
    name: "test"
  }
</script>
<style scoped>
 @import "style.css";
</style>
登录后复制

文件组织形式如下:

项目中的应用

在我的项目中,这两个方式都是应用到的,公共的样式采用第一种方式引用,对于项目中的每一个模块的样式是采用第二种方式的,在每个模块中都是含有一个样式文件的,用来存放这个模块中需要的样式,这个时候就需要灵活一些了,如果样式比较少,或者只是某一个vue文件会用到,还是可以将css样式直接写在.vue文件的style标签中。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

postman+json与springmvc如何实现批量添加

jQuery可见性过滤器的用法详解

Postman怎么进行token传参

以上是Vue的单页应用怎么引用样式文件的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在技嘉主板上设置键盘启动功能 (技嘉主板启用键盘开机方式) 如何在技嘉主板上设置键盘启动功能 (技嘉主板启用键盘开机方式) Dec 31, 2023 pm 05:15 PM

技嘉的主板怎么设置键盘开机首先,要支持键盘开机,一定是PS2键盘!!设置步骤如下:第一步:开机按Del或者F2进入bios,到bios的Advanced(高级)模式普通主板默认进入主板的EZ(简易)模式,需要按F7切换到高级模式,ROG系列主板默认进入bios的高级模式(我们用简体中文来示范)第二步:选择到——【高级】——【高级电源管理(APM)】第三步:找到选项【由PS2键盘唤醒】第四步:这个选项默认是Disabled(关闭)的,下拉之后可以看到三种不同的设置选择,分别是按【空格键】开机、按组

macOS:如何更改桌面小部件的颜色 macOS:如何更改桌面小部件的颜色 Oct 07, 2023 am 08:17 AM

在macOSSonoma中,小部件不必隐藏在屏幕外,也不必像在以前版本的Apple的macOS中那样在通知中心面板中被遗忘。相反,它们可以直接放置在Mac的桌面上–它们也是交互式的。不使用时,macOS桌面小部件会采用单色样式淡入背景,从而减少干扰,并允许您专注于活动应用程序或窗口中手头的任务。但是,当您单击桌面时,它们将恢复为全彩色。如果您更喜欢单调的外观,并且希望在桌面上保留这一方面的统一性,那么有一种方法可以使其永久化。以下步骤演示了它是如何完成的。打开“系统设置”应用

如何在苹果笔记中使用块引号 如何在苹果笔记中使用块引号 Oct 12, 2023 pm 11:49 PM

在iOS17和macOSSonoma中,Apple为AppleNotes添加了新的格式选项,包括块引号和新的Monostyle样式。以下是使用它们的方法。借助AppleNotes中的其他格式选项,您现在可以在笔记中添加块引用。块引用格式可以轻松地使用文本左侧的引用栏直观地偏移部分的写作。只需点击/单击“Aa”格式按钮,然后在键入之前或当您在要转换为块引用的行上时选择块引用选项。该选项适用于所有文本类型、样式选项和列表,包括清单。在同一“格式”菜单中,您可以找到新的“单样式”选项。这是对先前“等宽

C++编译错误:未定义的引用,该怎么解决? C++编译错误:未定义的引用,该怎么解决? Aug 21, 2023 pm 08:52 PM

C++是一门广受欢迎的编程语言,但是在使用过程中,经常会出现“未定义的引用”这个编译错误,给程序的开发带来了诸多麻烦。本篇文章将从出错原因和解决方法两个方面,探讨“未定义的引用”错误的解决方法。一、出错原因C++编译器在编译一个源文件时,会将它分为两个阶段:编译阶段和链接阶段。编译阶段将源文件中的源码转换为汇编代码,而链接阶段将不同的源文件合并为一个可执行文

神舟炫龙m7e8s3如何启用独立显卡直连? 神舟炫龙m7e8s3如何启用独立显卡直连? Jan 04, 2024 am 09:24 AM

神舟炫龙m7独显直连怎么开要开启神舟炫龙m7的独立显卡直连功能,您可以按照以下步骤进行操作:1.首先,确保您已经安装好了独立显卡的驱动程序。您可以前往神舟官方网站或独立显卡厂商官网下载并安装适合您显卡型号的最新驱动程序。2.在电脑桌面上,右键单击空白处,在弹出的菜单中选择“NVIDIA控制面板”(如果是AMD显卡,则选择“AMDRadeon设置”)。3.在控制面板中,找到“3D设置”或类似命名的选项,点击进入。4.在“3D设置”中,您需要找到“全局设置”或类似命名的选项。在这里,您可以指定使用独

WordPress网页错位现象解决攻略 WordPress网页错位现象解决攻略 Mar 05, 2024 pm 01:12 PM

WordPress网页错位现象解决攻略在WordPress网站开发中,有时候我们会遇到网页元素错位的情况,这可能是由于不同设备上的屏幕尺寸、浏览器兼容性或者CSS样式设置不当所致。要解决这种错位现象,我们需要仔细分析问题、查找可能的原因,并逐步进行调试和修复。本文将分享一些常见的WordPress网页错位问题以及相应的解决攻略,同时提供具体的代码示例,帮助开

如何辨别耐克鞋子的真假鞋盒(掌握一招轻松识别) 如何辨别耐克鞋子的真假鞋盒(掌握一招轻松识别) Sep 02, 2024 pm 04:11 PM

耐克作为全球知名的运动品牌,其鞋子备受瞩目。然而,市场上也存在大量的假冒伪劣商品,其中就包括假冒的耐克鞋盒。辨别真假鞋盒对于保护消费者的权益至关重要。本文将为您提供一些简单而有效的方法,以帮助您辨别真假鞋盒。一:外包装标题通过观察耐克鞋盒的外包装,可以发现许多细微的差异。真正的耐克鞋盒通常具有高品质的纸质材料,手感光滑,且没有明显的刺激性气味。正品鞋盒上的字体和标志通常清晰、精细,并且没有模糊或颜色不协调的情况。二:LOGO烫金标题耐克鞋盒上的LOGO通常是烫金工艺,真品鞋盒上的烫金部分会呈现出

Win11如何回退版本? Win11如何回退版本? Jun 30, 2023 pm 05:21 PM

Win11怎么退版本?很多朋友在升级了win11后认为其不好用,那么大家可以选择退回之前的版本哦。那么你知道该如何操作嘛?很多用户都不知道,其实方法并不难,下面小编给大家带来退回Win10的方法分享,一起来学习吧。退回Win10的方法分享1、进入“设置”。2、选择“WindowsUpdate”,然后点击“恢复”。3、在“恢复选项”中选择“以前版本的Windows”,点击“返回”。4、选择原因,然后点击“下一步”。5、你将看到“检查更新”的通知,选择“不,谢谢”。6、阅读需要了解的内容,然后点击“

See all articles