Javascript 为什么Vue模板中不允许使用样式标记，而.Vue文件中允许使用样式标记？

我在中找不到它的引用，但Vue似乎会自动删除模板中的

标记。例如，如果您的组件位于

.js

文件中，如

导出默认值{
模板：(
`
标题{颜色：蓝色；}
你好
...
`
),
//数据、方法等。
};

…那么您的标题将不会是蓝色的；样式将消失，并出现警告“客户端组件模板中忽略具有副作用（和）的标记。”

但是，如果您使用的是

.vue

文件和vue cli，通常建议您为CSS设置三个部分-

，为JavaScript设置

，为HTML模板设置

---

除非有其他（未记录的？）方法通过组件的配置参数设置样式，否则有两种不同的范例-一种用于js中的组件，另一种用于vue组件。为什么会这样？对于非vue cli用户，是否有其他方法将组件范围的样式添加到他们的vue应用程序中？

原因是有两种不同的路径用于呈现内容，即预编译和运行时编译

使用CLI编译SFCs（单文件组件或

.vue

文件）时，编译器将根据需要生成相应的css文件。它还将模板的内容转换为JavaScript代码，因此HTML模板代码被编译出来，并通过生成的js包处理呈现

另一方面，如果您依赖vue来运行时编译模板，那么css的编译就不受支持，原因有几个，例如需要额外的依赖项，无法生成css文件，这会使css注入变得模棱两可

---

如果您希望能够将css注入到页面中，那么没有任何东西可以阻止您手动注入css。您可以通过定义一个保存样式的

（或其他标记），然后让组件在每个选择器之前插入一个作用域id，然后将脚本插入html。这不是现成的解决方案，可能需要一些工作才能可靠地处理所有选择器，但这是可能的。

可能是安全问题。在模板字符串中这样做需要模板编译器比现在复杂得多。非vue cli用户是否有其他方法将组件范围内的样式添加到他们的vue应用程序中请参阅。另一种方法是将作用域委托给CSS模块加载器，并将生成的类名用作

：className=“importedClassName”

，请参阅。在React中通常都是这样做的，