Vue-cli 全局样式 与 局部样式

在 Vue-cli 中每个组件的样式都应该是分离解耦的。通过 scoped 标识符可以很好的进行样式作用域的划分。

回顾

之前通过 Vue-cli 工具搭建 todoList 的项目，我们构建了一个 TodoItem 的子组件。现在我们要给他加上样式。如下图，我们先给模板中的 li 标签加上 class="item"，然后在 <style></style> 中进行 css 的设置。

父组件 TodoList 我们不做任何样式的操作

效果展示
在第一次输入提交之前，input中的样式还是默认样式，但进行一次提交之后，input中文字的样式，和下面li标签文字的样式一致，这不是我们想要的。

scoped

所以我们子组件的 <style></style> 里面添加 scoped 标识符，划分子组件的样式作用域，使其成为局部样式，不会影响其他组件的样式。

效果展示
无论多少次输入都不会影响 input 框里面的样式。得到了我们想要的结果。