vue-pc端性能优化-css样式代码抽取

前言

• 当我们在一个vue页面写了html，css，js就会发现代码很多看着很头痛，其实css代码也是可以抽取出来的。

• 我们可以在src/assets 文件下新建style文件，把样式文件放在这里，引入到vue文件

• 这样抽取代码之后，不管时本地跑代码和上线测试，都是没有问题的，因为打包已经打进去了。

实现步骤-以dashboard.vue为例

新建文件夹在src/assets/style/dashboard/dashboard.scss文件

把首页样式复制过来

在首页引入样式文件

<style lang="scss" scoped>
@import '~@/assets/style/dashboard/dashboard.scss';
</style>

​

细节

1.style文件放入样式文件时候最好再建一个模块文件夹（就是多一个目录）这样结构清晰一目了然。

2.在.vue文件引入时候，最好使用~@/不然可能会样式出不来。

总结：

经过这一趟流程下来相信你也对 vue-pc端css样式代码抽取 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕