Vue实战经验与常见问题总结

1. 注册全局组件（一个由单个 Vue 文件组成的组件，而不是临时拼接的 template 结构）

结构：

代码：main.js

2. 防止头像被压缩的显示方式

通过设置 CSS 属性来确保头像不被压缩：

img {
　　display: block;
}

3. 解决背景图路径错误问题

如图所示，目录结构如下，路径和文件名都正确，但仍然无法找到图片并报错：

实际结构：

经过排查发现，Sass 文件是在 app.vue 中引入的，因此路径需要调整：

调整后的效果：

4. 使用 Sass 公用样式

第一种方法：使用 @extend

.common-style {...}
.div {
　　@extend .common-style;
}

第二种方法：使用 @mixin

@mixin common-style($param) {
　　...
　　@content;
};
.div {
　　@include common-style($param) {
　　　　自定义样式
　　}
};