web-dev-qa-db-ja.com

MaterializeCssをVue.jsで使用する方法

Vue-Material も Vuetify も使用したくありません。

Materialize を使用します。私がしていることは：

npm install materialize-css@next

Main.jsで、新しいVue Appが定義されている場合）次のようにMaterializeをインポートします。

import 'materialize-css'

なんらかの理由でJavaScriptは機能していますが、CSSが読み込まれていません。 Card Reveal でテストします。

スワッピングアニメーションは機能しますが、スタイルが設定されていません。 Card Revealは、MaterializeCssを使用したい理由の1つです。他の2つはこの機能を提供していません。また、100個の新しい要素（たとえば、vuetify）を使用するのではなく、「通常の」HTML要素を使用したいと思っています。

javascriptvue.jsmaterialize
6
Suisse

次の行は、javascript（node_modulesフォルダーからのnpmモジュールのエントリーポイント）をインポートします。

import 'materialize-css'

CSSファイルをインポートするには、次のようにします。

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

ステップ1：インストール

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

マテリアライズcss CDNをindex.htmlに追加することもお勧めします。 Aandはまた、scriptタグを作成し、これを追加します。

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