如何清除vue3自动创建的项目中的默认样式

如图所示 app.vue的样式和body我都没有设置样式 但是在页面检查中发现他们具备这些css样式 在我的vue3项目中没有找到！

Vue 3 自动创建的项目中默认使用了一些样式，可以通过以下步骤清除它们：

在你的项目的 src 目录下创建一个名为 assets 的文件夹。

在 assets 目录下创建一个名为 reset.css 的文件。

在 reset.css 文件中添加以下代码：

/* 清除默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 可选：设置页面字体 */
html {
  font-size: 16px;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

这段 CSS 代码会清除所有元素的默认边距和内边距，并设置页面的字体。你可以根据需要修改字体和字号。

在 main.js 文件中导入 reset.css：

import { createApp } from 'vue'
import App from './App.vue'
import './assets/reset.css'

createApp(App).mount('#app')

这样，你的 Vue 3 项目中的默认样式就被清除了，可以根据需要自定义样式。

这个文件找不到吗，默认的全局样式都在这里

/index.html 里引入了吧 你注释掉看看

• 这篇文章：推荐：vue解决引入外部css问题和解决css引入背景问题 也许能够解决你的问题，你可以看下
• 除此之外, 这篇博客: 使用vue实现css过渡和动画中的 属性 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• • duration - number | { enter: number, leave: number }：指定过渡的持续时间。
  • 比css中设置的时间优先级更高。
  • 单位是：ms。

  <transition :duration='100' >
      <div v-if='show'>hello</div>
  </transition >

  • 你也可以定制进入和移出的持续时间：

  <transition :duration='{ enter: 1000, leave: 3000 }' >
      <div v-if='show'>hello</div>
  </transition >