我有一个项目,致力于 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),正确且清晰地分离组件的样式和我的核心样式?请帮助我。
当您使用 2 个不同的 css 框架时出现冲突是正常的。幸运的是,您现在可以使用 vuetify 的
a la carte
功能从 15.x
导入特定组件。
样品
import Vue from 'vue'
import { Vuetify, VApp, VBtn } from 'vuetify'
Vue.use(Vuetify, {
components: {
VApp,
VBtn
}
})
这样,您只需导入您需要的内容。
在Vuetify2中,要仅导入必要的组件,应按如下方式导入它们:
import Vue from 'vue';
import Vuetify, {VBtn} from 'vuetify/lib';
import {Ripple} from 'vuetify/lib/directives';
Vue.use(Vuetify, {
components: {VBtn},
directives: {Ripple}
});
export default new Vuetify({});
也可以直接在页面或组件中导入它们。