vue-material是什么？-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

vue-material是一个建立在谷歌的Material Design基础上的轻量级框架，是一个实现Google像素材料设计的Vue组件库，它提供了适合所有现代Web浏览器的内置动态主题的组件，它的API也简单明了。

Vue Material 是一个轻量级的框架，建立在谷歌的 Material Design 基础上。设计强大的和美观的web应用并适用于不同的屏幕。

vue material是一个实现Google像素材料设计的Vue组件库，它提供了适合所有现代Web浏览器的内置动态主题的组件，它的API也简单明了。

你可以动态地生成和使用主题，根据自己的需求只用组件，UI元素与组件的优势在于可以更简单的使用API和其他的。

它提供一组可重用的组件和一系列的UI元素，使用 Vue 2.0 建立支持主流的浏览器的应用。

官网：http://vuematerial.materializecss.cn/#/

安装方法

引入 Roboto 和谷歌 Icons 从谷歌 CDN:

1 2	`<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">`

通过 npm 或 yarn 来安装 Vue Material

1 2	`npm install vue-material` `yarn add vue-material`

* 其他包管理，比如 JSPM 和 Bower 暂不支持。

或从Github 下载脚本和样式并引入到HTML中:（下载地址https://github.com/marcosmoura/vue-material/archive/master.zip）

1 2	`<link rel="stylesheet"` `href="path/to/vue-material.css">` `<script src="path/to/vue-material.js"></script>`

用法

启用 Vue Material 在你的应用中通过 Vue.use()。您也可以单个单个的启用组件:

// 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)