vue重置css样式

Vue项目中重置CSS样式通常指的是将浏览器的默认样式重置为统一的状态，这样可以确保在不同的浏览器中网页的呈现效果尽可能一致。这通常通过使用CSS重置样式表（reset.css）来实现。在Vue中，你可以通过以下几种方式来重置样式：

1. **使用第三方库**：比如normalize.css，它是一个流行的CSS重置库，旨在保护有用的默认值而不是“零”（即不删除所有默认样式），并通过合理的方式进行样式修正。

2. **编写自定义reset.css文件**：创建一个自定义的CSS文件，在其中编写规则以覆盖默认的浏览器样式。例如，你可以设置所有的内边距（padding）和外边距（margin）为0，统一字体大小，重置列表样式等。

3. **在Vue组件中设置局部样式**：如果只需要重置特定组件的样式，可以在该组件的`<style>`标签中添加重置样式。使用`scoped`属性确保样式只应用于当前组件。

4. **使用Vue单文件组件的<style>标签**：在`.vue`文件的`<style>`部分，可以直接添加reset.css的代码，或者链接外部reset.css文件。

举个简单的例子，你可以在项目中创建一个`reset.css`文件，并在其中添加以下基本的重置样式：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

然后，在Vue项目中的入口文件（如`main.js`或`app.js`）中引入这个`reset.css`文件：

import './assets/css/reset.css';

这样，整个Vue项目的默认样式就会被重置。