博客

方法一
npm i reset-css (下载清除默认样式插件)

在main.js中全局引入样式

import 'reset.css'

方法二

在Vue中清除默认样式可以使用已有的CSS reset库，例如normalize.css、reset.css等。这些库提供了跨浏览器的CSS重置，可以有效地消除浏览器的默认样式和差异。

如果需要在Vue项目中使用CSS reset库，可以通过以下步骤进行添加：

安装CSS reset库，例如normalize.css：
npm install normalize.css --save
在App.vue或者引入全局样式的地方引入CSS reset库。例如，在App.vue中引入normalize.css：
<template>
  <div id="app">
    <!-- ... -->
  </div>
</template>

<style>
/* 引入normalize.css */
@import '~normalize.css';
/* 其他全局样式 */
/* ... */
</style>
使用完整版的CSS reset库可能会影响到一些自定义样式，因此可以选择只引入某些部分。例如，如果只想消除浏览器的默认样式，可以使用以下代码：
@import '~normalize.css'; /* 引入normalize.css */

/* 消除浏览器的默认样式 */
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
如果需要更加精细地控制默认样式，也可以直接在组件中定义重置样式。例如，在一个组件中清除ul元素的默认样式：
<template>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</template>

<style>
/* 清除ul元素的默认样式 */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>
除了使用CSS reset库，还可以使用Vue提供的scoped样式来限定组件的样式范围。例如，在一个组件中定义scoped样式：

<template>
  <div class="my-component">
    <!-- ... -->
  </div>
</template>

<style scoped>
/* 在组件中定义scoped样式 */
.my-component {
  margin: 0;
  padding: 0;
}
</style>
通过以上方式，我们可以清除Vue项目中的默认样式，或者更加精细地控制样式。