如何在Vue.js中使用MaterializeCss？

Question

我不想使用Vue-Material或Vuetify。

我想使用Materialize。我要做的是：

npm install materialize-css@next

在main.js中，定义了我的新Vue App的地方，我像这样导入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()
},
...

Answer 2

这行代码导入了javascript（node_modules文件夹中npm模块的入口）：

import 'materialize-css'

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

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