vue引入全局css文件 |轻松学html css网站开发

全局CSS文件可以在Vue.js应用程序的根目录下创建，该文件可以包含所有应用的CSS样式。在使用全局CSS文件时，你可以将其导入到Vue.js组件的模板中，以便在整个应用程序中应用它们。

下面是一个使用Vue.js全局CSS文件的简单示例：

1. 首先，在根目录下创建一个新的CSS文件，命名为app.css。

2. 在Vue.js应用程序的根目录下创建一个名为app.js的文件，并在其中添加以下代码：

“`

import ‘./app.css’; // 导入全局CSS文件

import Vue from ‘vue’;

import App from ‘./App.vue’; // 导入Vue组件

Vue.component(‘App’, App); // 创建Vue组件

“`

这将导入全局CSS文件，并使用import语句将其中的内容导入Vue组件的模板中。

3. 在Vue.js组件的模板中，使用@import语句导入全局CSS文件的内容：

“`

<style>

/* 全局CSS样式在这里应用 */

</style>

“`

4. 创建一个新的Vue组件，并将其注入到Vue.js应用程序中。在该组件的模板中，使用@import语句导入全局CSS文件的内容：

“`

<template>

<div>

<h1>Hello, Vue.js!</h1>

<div @click=”handleClick”>Click me</div>

</div>

</template>

<script>

import ‘./my-component.css’; // 导入全局CSS文件的内容

export default {

name: ‘MyComponent’,

methods: {

handleClick() {

// 应用全局CSS样式

}

}

}

</script>

“`

在这个例子中，大家使用了@import语句来导入全局CSS文件的内容，并将其应用于Vue组件的模板中。当用户点击组件时，大家还会应用该CSS样式。

通过使用Vue.js的import语句，你可以轻松地将全局CSS文件导入到Vue.js应用程序中，并在整个应用程序中应用它们。这使得Vue.js变得更加强大和灵活，使您可以更好地构建用户界面。