前端之vue的CSS样式

相关名称：
CSS预处理器（如SCSS）或后处理器（如PostCSS）。

vue项目的结构

Vue的三种样式化方法：

1. 外部CSS文件。
2. 单个文件组件（.vue文件）中的全局样式。
3. 单个文件组件中组件范围的样式。

外部CSS文件样式

vue项目中有一个与 components 同级的文件夹 asset，我在这里理解成“有用的东西”，存放资源文件，如，图片、css。

1. 在 asset 文件夹内编写css文件

/*reset.css*/
/* RESETS */

/* 让所有的元素都使用 border-box ，并且包括 伪类 before, after 。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
*:focus {
 /* 轮廓:位与border外,用于凸显元素 */
  outline: 3px dashed #228bec;
}
html {
 /* font-size / line-height font-family */
  font: 62.5% / 1.15 sans-serif;
}
h1,
h2 {
  margin-bottom: 0;
}
ul {
 /* 取消列表的默认样式 */
  list-style: none;
  padding: 0;
}
button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}
button::-moz-focus-inner {
  border: 0;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  /* 1 */
  overflow: visible;
}
input[type="text"] {
  border-radius: 0;
}
body {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  font: 1.6rem/1.25 "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
  color: #4d4d4d;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* 媒体查询 */
@media screen and (min-width: 620px) {
  body {
    font-size: 1.9rem;
    line-height: 1.31579;
  }
}
/*END RESETS*/

2. 在src内的 main.js 内导入该css，这个情况下是全局生效的

import './assets/reset.css';

向单个文件组件添加全局样式

任意.vue文件中<script>内的样式都是全局样式

单个组件内部的样式

在组件底部

<style scoped>
</style>

总结:

1. 外部css文件放在src/asset内，在src/main.js内导入，是为全局变量
2. 向.vue组件中添加全局样式，直接写在<script>内
3. 向单个.vue组件添加自己的样式，该.vue组件内添加<style scoped>
   下一节:前端之vue的计算属性