javascript - 如何在 Vue.js 中使用 MaterializeCss？

Question

我不想使用 Vue-Material也不Vuetify .

我想使用 Materialize . 我所做的是:

npm install materialize-css@next

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

import 'materialize-css'

javascript 可以正常工作，但 CSS 没有加载；我用 Card Reveal 测试它.

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

Answer 1

第一步:安装

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

第二步:在src/main.js中导入materialize css

在 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()
},
...