vue public css文件

Vue是一种流行的JavaScript框架，许多开发者使用它来构建现代化的Web应用程序。其中一部分关键的功能是可以将组件分离为不同的文件并使用单个Vue实例将它们组合在一起。使用Vue时，通常会遇到公共样式的问题，即如何在多个组件中重复使用相同的CSS文件。

最简单的解决方案是将CSS文件嵌入到Vue组件中，但这可能会导致代码重复，难以维护，并且无法轻松更改样式。为了解决这个问题，可以将公共CSS文件放在公共目录中并在Vue组件中引用它们。

在Vue中，使用CLI（命令行界面）或Vue UI创建项目时，将自动创建一个名为“public”的目录。该目录将作为HTML和静态资源的入口点。通过将公共CSS文件放置在“public”目录中并在Vue组件中通过link标签引用它们，可以轻松地在整个应用程序中重用和更新样式。

例如，在public目录中创建名为“styles.css”的CSS文件，并在Vue组件模板中添加以下代码：

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

<style src="../public/styles.css"></style>

这将使Vue组件能够访问名为“styles.css”的公共CSS文件，而无需在每个组件中都引用相同的CSS样式。

总之，将公共CSS文件放在Vue项目的公共目录中，并通过link标签在Vue组件中引用它们，是一种有效的方法来重用CSS样式。这样做可以减少代码重复，并且能够轻松地更改应用程序中的样式。