为什么不把 css 样式写在在 .vue 文件中 看过很多 vue 项目的代码, 发现很多人喜欢把样式写在组件了, 其原因大部分是为了方便, 好维护, 也很多人喜欢滥用scoped属性, 官方的 vue-hackernews-2.0 的实例也是这么做的, 但是个人却不太喜欢这么做, 原因有以下几点:
构建速度会变慢 写在组件的 style 里的样式会先经过vue-loader再走less-loader或者css-loader, 无形中增加了编译时间
在用了 scope 属性后, 生成的 js 文件和 css 文件都会正常臃肿一些 scope 属性, 其实就是在经过vue-loader编译的时候, 组件模版的对应元素和 css 样式添加一个随机的属性, 这样会造成在代码中添加大量类似data-v-33053b70这样的代码上去, 无形中使打包后的文件变大, 组件越多, 越明显
scope 属性, 对当前组件不存在的元素不起作用 原因同上条, 这种情况在用了组件库的情况下, 但是需要修改组件库组件样式时, 会经常遇到
在用了 scope 属性后, css 解析效率会变低 css 中, 属性选择器的效率是最低的, 特别是直接用元素选择器的情况下
个人的解决方法:
样式统一管理, 绝对不将样式写的到处都是
如上面截图中, style.less 文件是入口文件, 负责引入其他各个子样式文件, 最后由 App.vue 根组件引入, home 文件夹下所有以下划线开头的文件为各个组件的样式, 如一些 less 配置, 可以放在 _base.less 文件里, 布局样式可以放在 _layout.less 文件里, 其他的一个路由组件一个文件, 再配合现在编辑的分屏功能, 也是一样可以很快定位到相关文件, 甚至一些编辑器, 可以直接从模版中跳到对应的样式文件
其实上面都是废话, 个人就是单纯不想把样式写在组件里而已, 如果你觉得这个方法不错, 可以借鉴改进, 如果你还是觉得写在组件里好, 也可以继续写在组件里
