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="&#39;default&#39;">
  <md-toolbar>
    <div class="md-title">My App</div>
  </md-toolbar>
  <md-button v-md-theme="&#39;indigo&#39;">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!