如何在我现有的Vue2项目中清楚地和分离地使用vuetify组件

Question

我有一个项目，正在研究Laravel＆amp; 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）正确而清晰地分离组件的样式和核心样式？请帮帮我。

Answer 1

当您使用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