Heim > Artikel > Web-Frontend > Was ist Vue-Material?
vue-material ist ein leichtes Framework, das auf Googles Material Design basiert. Es ist eine Vue-Komponentenbibliothek, die Google Pixel Material Design implementiert. Es bietet Komponenten mit integrierten dynamischen Designs, die für alle modernen Webbrowser geeignet sind und klar.
Vue Material ist ein leichtes Framework, das auf Googles Material Design basiert. Entwerfen Sie leistungsstarke und schöne Webanwendungen, die auf verschiedenen Bildschirmen funktionieren.
vue-Material ist eine Vue-Komponentenbibliothek, die Google Pixel Material Design implementiert. Sie bietet Komponenten mit integrierten dynamischen Designs, die für alle modernen Webbrowser geeignet sind, und ihre API ist ebenfalls einfach und klar.
Sie können Themen dynamisch generieren und verwenden, indem Sie nur Komponenten entsprechend Ihren eigenen Anforderungen verwenden. Der Vorteil von UI-Elementen und -Komponenten besteht darin, dass es einfacher ist, APIs und andere zu verwenden.
Es bietet eine Reihe wiederverwendbarer Komponenten und eine Reihe von UI-Elementen und verwendet Vue 2.0 zum Erstellen von Anwendungen, die gängige Browser unterstützen.
Offizielle Website: http://vuematerial.materializecss.cn/#/
Installationsmethode
Einführung von Roboto und Google Icons von Google CDN:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
Installieren Sie Vue Material über npm oder Yarn
npm install vue-material yarn add vue-material
* Andere Pakete Management wie JSPM und Bower werden noch nicht unterstützt.
Oder laden Sie das Skript und den Stil von Github herunter und führen Sie sie in HTML ein: (Download-Adresse https://github.com/marcosmoura/vue-material/archive/master.zip)
<link rel="stylesheet" href="path/to/vue-material.css"> <script src="path/to/vue-material.js"></script>
Nutzung
Vue Material aktivieren über Vue.use() in Ihre Anwendung einbinden. Sie können Komponenten auch einzeln aktivieren:
// To import the whole library import Vue from 'vue' import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material.css' Vue.use(VueMaterial) // Or to import individual components import Vue from 'vue' import VueMaterial from 'vue-material' import 'vue-material/dist/components/mdCore/index.css' //Required to boot vue material import 'vue-material/dist/components/mdButton/index.css' import 'vue-material/dist/components/mdIcon/index.css' import 'vue-material/dist/components/mdSidenav/index.css' import 'vue-material/dist/components/mdToolbar/index.css' Vue.use(VueMaterial.mdCore) //Required to boot vue material Vue.use(VueMaterial.mdButton) Vue.use(VueMaterial.mdIcon) Vue.use(VueMaterial.mdSidenav) Vue.use(VueMaterial.mdToolbar)
Thema anwenden
Damit Vue Material ordnungsgemäß funktioniert, müssen Sie ein Standardthema konfigurieren. Sie können auch mehrere Themen gleichzeitig registrieren.
Einzelnes Thema
Vue.material.theme.register('default', { primary: 'cyan', accent: 'pink' })
Mehrere Themen
Vue.material.theme.registerAll({ default: { primary: 'cyan', accent: 'pink' }, indigo: { primary: 'indigo', accent: 'pink' } })
Um Ihr Thema auf jeden Teil des Codes anzuwenden, müssen Sie den Befehl v-md-theme verwenden:
<div id="app" v-md-theme="'default'"> <md-toolbar> <div class="md-title">My App</div> </md-toolbar> <md-button v-md-theme="'indigo'">My Button</md-button> </div>
Verwandte Empfehlungen:
2020-Frontend Zusammenfassung der vue-Interviewfragen (mit Antworten)
vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020
Weitere programmbezogene Kenntnisse finden Sie unter: Programmier-Lernkurs! !
Das obige ist der detaillierte Inhalt vonWas ist Vue-Material?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!