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

Posted

技术标签:

【中文标题】如何在我现有的 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

以上是关于如何在我现有的 Vue2 项目中清楚而分开地使用来自 vuetify 的组件的主要内容,如果未能解决你的问题,请参考以下文章