扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章给大家分享的是有关vue-material指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
创新互联服务项目包括裕华网站建设、裕华网站制作、裕华网页制作以及裕华网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,裕华网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到裕华省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!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:
通过 npm 或 yarn 来安装 Vue Material
npm install vue-material yarn add vue-material
* 其他包管理,比如 JSPM 和 Bower 暂不支持。
或从Github 下载脚本和样式并引入到HTML中:(下载地址https://github.com/marcosmoura/vue-material/archive/master.zip)
用法
启用 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)
应用主题
为了让 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 指令:
My AppMy Button
感谢各位的阅读!关于vue-material指的是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流