如何在 Vue.js 中使用 MaterializeCss？

Posted 2023-02-23

【中文标题】如何在 Vue.js 中使用 MaterializeCss？

【英文标题】：How to use MaterializeCss with Vue.js?

【发布时间】：2019-03-28 21:47:13

【问题描述】：

我不想使用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 中）。

【参考方案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()
,
...

【参考方案2】：

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

import 'materialize-css'

要导入 CSS 文件，只需这样做：

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

【讨论】：

我发现我需要在index.html 中添加<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 才能加载图标。例如。移动导航的汉堡图标。

【参考方案3】：

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

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

【讨论】：

不确定 vue 和 materializecss 如何共享 DOM。我建议在安装组件后运行函数：mounted: function() M.AutoInit()