如何在我现有的Vue2项目中清楚地与vuetify分开使用组件 [英] How to use clearly and separatedly a component from vuetify in my existing Vue2 project

问题描述

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

I have a project, working on Laravel & Vue2. I want to use some material components from a Vue plugins, Vuetify, in a specific section of my project. First of all, I added Vuetify styles in my project as shown bellow:

...
 <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)正确，清晰地将组件的样式与我的核心样式分开?请帮助我.

In this case, vuetify styles effected my whole project styles, as well as my core styles altered vuetify component styles.
I, also, used to scoped style in a Vue component, single file component. But the result was the same as previous, altered the whole Vue component. So, How can I use a vuetify component, such as FAB, properly and clearly separate styles of the component and my core styles? please help me.

推荐答案

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

It's only normal to have a conflict when you are using 2 different css frameworks. Luckily you can now import specific components from vuetify using it's a la carte feature since 15.x.

样品

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

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

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

This way, you'll only have to import what you need.

链接

这篇关于如何在我现有的Vue2项目中清楚地与vuetify分开使用组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！