如何在我现有的 Vue2 项目中清楚而分开地使用来自 vuetify 的组件

How to use clearly and separatedly a component from vuetify in my existing Vue2 project(如何在我现有的 Vue2 项目中清楚而分开地使用来自 vuetify 的组件)

问题描述

我有一个项目，正在开发 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 以来的 a la carte 功能从 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 的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！