vue里,link引入css样式写在哪里
时间: 2023-08-11 16:36:21 浏览: 92
vue 引入公共css文件的简单方法(推荐)
在Vue中,可以在组件中使用 `style` 标签或 `link` 标签引入 CSS 样式。
1. 使用 `style` 标签引入 CSS 样式
在 Vue 组件的 `<template>` 标签中,可以使用 `<style>` 标签引入 CSS 样式。样式将仅应用于当前组件。
```html
<template>
<div class="my-component">
<!-- your component code here -->
</div>
</template>
<style>
.my-component {
background-color: #f0f0f0;
padding: 20px;
}
</style>
```
2. 使用 `link` 标签引入 CSS 样式
如果你需要在多个组件中共享样式,可以在 `index.html` 文件中使用 `link` 标签引入 CSS 样式。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="path/to/styles.css">
</head>
<body>
<div id="app"></div>
<script src="path/to/your/vue.js"></script>
<script src="path/to/your/app.js"></script>
</body>
</html>
```
当你在 Vue 组件中使用类名时,可以使用在 `styles.css` 中定义的样式。
```html
<template>
<div class="my-component">
<!-- your component code here -->
</div>
</template>
```
阅读全文