css - 如何在我现有的Vue2元素中与vuetify分开清楚地使用组件

我有一个项目正在研究Laravel和Vue2。我想在项目的特定部分中使用Vue插件Vuetify中的一些材料组件。首先，我在项目中添加了Vuetify样式，如下所示：

...
 <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
 <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
</head>

在这种情况下，Vuetify样式影响了我的整个项目样式，而我的核心样式也改变了Vuetify组件样式。
我也习惯于在Vue组件（单个文件组件）中限制样式的范围。但是结果与以前相同，只是更改了整个Vue组件。因此，如何使用vuetify组件（如FAB）正确，清晰地将组件的样式和核心样式分开？请帮我。

最佳答案

当您使用2个不同的CSS框架时，发生冲突是很正常的。幸运的是，自a la carte以来，您现在可以使用其15.x功能从vuetify导入特定组件。

样品

import Vue from 'vue'
import { Vuetify, VApp, VBtn } from 'vuetify'

Vue.use(Vuetify, {
  components: {
    VApp,
    VBtn
  }
})

这样，您只需导入所需的内容即可。

见https://vuetifyjs.com/vuetify/a-la-carte

关于css - 如何在我现有的Vue2元素中与vuetify分开清楚地使用组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46344622/