如何在 Vue.js 中使用 MaterializeCss？

Question

我不想使用 Vue-Material 或 Vuetify 。

我想使用 Materialise 。我所做的是：

 npm install materialize-css@next

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

 import 'materialize-css'

javascript 以某种方式工作，但 CSS 未加载；我用 Card Reveal 测试它。

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

原文由 Suisse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此行导入 javascript（来自 node_modules 文件夹的 npm 模块的入口点）：

 import 'materialize-css'

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

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

原文由 Suisse 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

第一步：安装

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

第 2 步：在 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()
},
...

原文由 bruinspaw 发布，翻译遵循 CC BY-SA 4.0 许可协议