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

Posted 2023-02-23

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

【英文标题】：How to use clearly and separatedly a component from vuetify in my existing Vue2 project

【发布时间】：2018-03-02 20:19:40

【问题描述】：

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

【参考方案1】：

只有在使用 2 个不同的 css 框架时才会发生冲突。幸运的是，您现在可以使用 vuetify 的 a la carte 功能从 15.x 导入特定组件。

示例

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

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

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

Link

【讨论】：

链接和代码好像失效了

这是新链接：vuetifyjs.com/en/customization/a-la-carte