web-dev-qa-db-fra.com

Comment utiliser MaterialiseCss avec Vue.js?

Je ne veux pas utiliser Vue-Material ni Vuetify .

Je veux utiliser Materialise . Ce que je fais c'est:

npm install materialize-css@next

Dans main.js, où ma nouvelle application Vue est définie, j'importe Materialize comme ceci:

import 'materialize-css'

D'une certaine manière, le javascript fonctionne, mais le CSS ne se charge pas; Je le teste avec un Card Reveal .

L'animation de permutation fonctionne, mais elle n'est pas stylisée. Card Reveal est l'une des raisons pour lesquelles je veux utiliser MaterialiseCss, ces deux autres ne fournissent pas cette fonctionnalité. Et je veux également utiliser des éléments HTML "normaux" au lieu d'utiliser 100 nouveaux éléments (par exemple dans vuetify).

javascriptvue.jsmaterialize
6
Suisse

Cette ligne importe le javascript (le point d'entrée du module npm du dossier node_modules):

import 'materialize-css'

Pour importer les fichiers CSS, procédez comme suit:

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

Étape 1: installation

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

Étape 2: importez Materialise CSS dans src/main.js

在 src/main.js

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

Étape 3: initialiser les composants de matérialisation

Ajoutez le code suivant dans votre composant (par exemple App.vue):

import M from 'materialize-css'

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

Je vous recommande également d'ajouter le CDN matérialiser css dans le index.html. Vous pouvez également créer une balise de script et ajouter ceci:

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