css - 如何在我现有的 Vue 2 元素中清楚且独立地使用 vuetify 的组件

Question

我有一个元素，致力于 Laravel 和 Vue2。我想在元素的特定部分使用 Vue 插件 Vuetify 中的一些 Material 组件。首先，我在我的元素中添加了 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，正确而清晰地分离组件的样式和我的核心样式？请帮助我。

Answer 1

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

示例

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

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

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

Link