vue引入css

作者：农村混血兒发布日期:2026-02-17 浏览:100

<template>
  <div class="app">
    <h1>Hello Vue!</h1>
  </div>
</template>

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

<style>
/* 在这里引入外部 CSS 文件 */
@import './assets/styles.css';

/* 或者直接在 <style> 标签中编写样式 */
.app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

<style> 标签：可以直接在 Vue 组件的 <style> 标签中编写 CSS 样式，这些样式会作用于整个组件。
@import 语句：可以在 <style> 标签中使用 @import 来引入外部的 CSS 文件。例如，上面的代码中引入了 ./assets/styles.css 文件。
scoped 样式：如果你希望样式的范围仅限于当前组件，可以在 <style> 标签上添加 scoped 属性。这样，样式只会应用到当前组件的模板中。

如果你需要引入全局的 CSS 文件，也可以在项目的入口文件（如 main.js）中使用 import 语句来引入：

import './assets/styles.css';

上一篇：vue signalr

下一篇：vue3跳转新页面