Как использовать MaterializeCss с Vue.js?
Я не хочу использовать Vue-материал или Vuetify.
Я хочу использовать Материализовать. Что я делаю:
npm install materialize-css@next
В main.js, где определено мое новое приложение Vue, я импортирую Materialize следующим образом:
import 'materialize-css'
Каким-то образом JavaScript работает, но CSS не загружается; Я тестирую его с помощью Открытие карты.
Анимация подкачки работает, но не стилизована. Card Reveal - одна из причин, по которой я хочу использовать MaterializeCss, две другие не предоставляют эту функциональность. И я также хочу использовать «обычные» HTML-элементы вместо 100 новых элементов (например, в vuetify).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Эта строка импортирует javascript (точка входа модуля npm из папки node_modules):
import 'materialize-css'
Чтобы импортировать файлы CSS, просто сделайте следующее:
import 'materialize-css/dist/css/materialize.css'
Я также рекомендую вам добавить материализованный css CDN в index.html. А также создайте тег скрипта и добавьте это:
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
});
Не знаю, как vue и materializecss разделяют DOM. Я рекомендую запустить функцию после установки компонента: mounted: function() { M.AutoInit() }
Шаг 1: установка
npm install materialize-css@next --save
npm install material-design-icons --save
Шаг 2: импортируйте материализацию css в src / main.js
На 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()
},
...
Я обнаружил, что мне нужно добавить
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">вindex.html, чтобы значки загружались. например. значок гамбургера для мобильной навигатора.