Vue.js 如何使用 MaterializeCss？

Question

我不想使用 Vue-Material nor Vuetify。

我想使用 Materialize。 我做的是：

npm install materialize-css@next

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

import 'materialize-css'

不知何故 javascript 正常工作，但 CSS 未加载；我用 Card Reveal 测试它。

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

Answer 1

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

import 'materialize-css'

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

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

Answer 2

我还建议您在 index.html 中添加 materialize css CDN。并创建一个脚本标签并添加：

document.addEventListener('DOMContentLoaded', function() {
    M.AutoInit();
 });

Answer 3

第一步：安装

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

第 2 步：在 src/main.js

中导入实现 css

在src/main.js

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

第 3 步：初始化实体化组件

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

import M from 'materialize-css'

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