VUE实际项目开发过程中填的坑

1.单页应用CSS样式冲突：

参考：https://segmentfault.com/q/1010000007231332

问题描述：

我们这边的前端做了个单页面应用，用vue+webpack做的，然后现在出个一个问题：

就是每个页面单独引了自己的CSS，然后我现在就从A面到B页面之后，再Chrome的F12中还能看到A页面的CSS还残留着，返回A页面后，B的CSS也在，相当于跳的页面越多CSS叠加的越多，因为前期没注意，所以中间有一些class名字冲突了，导致样式冲突出问题了，不知道各位有没有遇到过这个问题，想问能不能每个页面只加载自己引用CSS的，跳转后让前一个页面的销毁?

解决方案：

<style lang="scss" scoped>...</style>

2.静态文件引用问题

问题描述：

vue-cli打包以后相对定位资源文件出现偏差

解决方案：

assets和static文件夹的区别

相信有很多人知道vue-cli有两个放置静态资源的地方，分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。

assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。例如，在

和background: url(./logo.png)中，"./logo.png" 是相对的资源路径，将由Webpack解析为模块依赖。

static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用：/static/[filename]。

在我们实际的开发中，总的来说：static放不会变动的文件 assets放可能会变动的文件。

3.子组件向父组件传参语法

vm.$on( event, callback )

vm.$emit( event, […args] )