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:
<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
npm install vue-materialyarn add vue-material
* 其他包管理，比如 jspm 和 bower 暂不支持。
或从github 下载脚本和样式并引入到html中:（下载地址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>
用法
启用 vue material 在你的应用中通过 vue.use()。 您也可以单个单个的启用组件:
// to import the whole libraryimport vue from 'vue'import vuematerial from 'vue-material'import 'vue-material/dist/vue-material.css'vue.use(vuematerial)// or to import individual componentsimport vue from 'vue'import vuematerial from 'vue-material'import 'vue-material/dist/components/mdcore/index.css' //required to boot vue materialimport '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 materialvue.use(vuematerial.mdbutton)vue.use(vuematerial.mdicon)vue.use(vuematerial.mdsidenav)vue.use(vuematerial.mdtoolbar)
应用主题
为了让 vue material 正常工作，你需要配置一个默认的主题。 你也可以一次性注册多个主题。
单个主题
vue.material.theme.register('default', { primary: 'cyan', accent: 'pink'})
多个主题
vue.material.theme.registerall({ default: { primary: 'cyan', accent: 'pink' }, indigo: { primary: 'indigo', accent: 'pink' }})
应用你的主题到每一部分代码，你需要使用 v-md-theme 指令:
<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>
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程学习课程！！
以上就是vue-material是什么？的详细内容。