如何将 MaterializeCss 与 Vue.js 结合使用？

我不想使用Vue-材质 https://github.com/vuematerial/vue-material nor Vuetify https://vuetifyjs.com/.

我想用物化 https://materializecss.com/。 我所做的是：

npm install materialize-css@next

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

import 'materialize-css'

不知何故，JavaScript 正在工作，但 CSS 未加载；我用一个测试它卡牌展示 https://materializecss.com/cards.html#reveal.

交换动画有效，但没有样式。 Card Reveal 是我想使用 MaterializeCss 的原因之一，其他两个不提供此功能。我还想使用“普通”HTML 元素，而不是使用 100 个新元素（例如在 vuetify 中）。

第一步：安装

npm install materialize-css@next --save
npm install material-design-icons --save

第2步：在src/main.js中导入materialize css

At src/main.js

import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'

第三步：初始化物化组件

在您的组件中添加以下代码（例如 App.vue）：

import M from 'materialize-css'

export default {
...
mounted () {
    M.AutoInit()
},
...