如何在Vue.js中使用MaterializeCss? [英] How to use MaterializeCss with Vue.js?

问题描述

我不想使用 Vue材料或我想使用材料化.我要做的是:

I want to use Materialize. What I do is:

npm install materialize-css@next

在main.js中，定义了我的新Vue应用程序的地方，我像这样导入Materialize:

In main.js, where my new Vue App is defined I import Materialize like this:

import 'materialize-css'

以某种方式JavaScript可以正常工作，但是CSS无法加载；我使用 Card Reveal 进行了测试.

Somehow the javascript is working, but the CSS is not loading; I test it with a Card Reveal.

交换动画有效，但未设置样式.Card Reveal是我要使用MaterializeCss的原因之一，其他两个都不提供此功能.而且我还想使用普通" HTML元素，而不是使用100个新元素(例如，在vuetify中).

The swapping animation works, but it is not styled. Card Reveal is one of the reasons why I want to use MaterializeCss, those other two don't provide this functionality. And I also want to use 'normal' HTML elements instead of using 100 of new elements (for example in vuetify).

推荐答案

此行导入javascript(node_modules文件夹中npm模块的入口):

This line imports the javascript (the entry point of the npm module from node_modules folder):

import 'materialize-css'

要导入CSS文件，只需执行以下操作:

To import the CSS files just do this:

import 'materialize-css/dist/css/materialize.css'

这篇关于如何在Vue.js中使用MaterializeCss?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！