Vue Material - 基于谷歌 Material Design 打造的前端组件库,用 Vue 开发海外应用的绝佳选择

Vue Material - 基于谷歌 Material Design 打造的前端 UI 组件库,用 Vue 开发海外应用的绝佳选择

一位朋友问我用 vue 开发 APP 在谷歌商店上架,有什么简单的 UI 组件库,我推荐了这款,同样推荐给各位。

关于 Vue Material

Vue Material 是一款简单、轻量级的 Vue 组件,组件的设计完全按照 Google Material Design 规范构建,由开发者 Marcos Moura 开发并且维护,Vue Material 最初是一个小而简单的想法,作者喜欢 Vue 的简单易上手,但找不到一个好的 Material Design 解决方案,于是就开始开发自己的库,如今在 Github 上收获了 9.7k star,已经成为一个广受欢迎的 UI 库。

Vue Material 官网

Vue Material 组件库技术特性

  • 完美实现 Material Design 细腻精致的交互动效,质量超高
  • 屏幕适配完美,在桌面设备/平板电脑和手机上都能自适应,用途广泛
  • 提供数十个常用的组件,这些组件都支持按需引入,减少打包占用空间
  • 支持动态主题,API 使用简单,和 Vue.js 一样简单好用

Vue Material 屏幕自适应

Vue Material 开发上手体验和建议

最近有个朋友想要用 Vue 开发一个在 Google Play 上架的海外 APP,APP 功能很简单,所以希望组件库也足够轻量,问我有没有适合的前端组件库

Google Play 上架的应用和国内不一样,对 UI 设计有要求,尤其不能使用类似 iOS 的中性设计风格,而 Material Design 风格的组件库就成了最好的选择了。

Vue Material 开发文档

Vue Material 就是一款轻量的 UI 组件库,官网有详细的开发文档,不过只有英文版本,不过使用真的很简单,就算不借助翻译工具,也能很快上手。

Vue Material 组件预览

支持 NPM 或 Yarn 安装:

在 Vue 中按需引入组件:

Vue Material 组件预览

接下来只要创建自己的主题,就可以开始开发自己的应用了:

更多组件的用法可以参考官网的组件文档。总的来说,这是一款容易上手、非常轻量的 Vue 组件库,唯一的缺点可能就是更新频率不高,而且只有 Vue 2.x 版本,不过好在相对比较稳定,用来开发简单的 web 或者移动应用再适合不过。

免费开源说明

Vue Material 是一款免费开源的 Vue 2.x UI 组件库,作者是 Marcos Moura,整个项目源码基于 MIT 开源协议托管在 Github 上,任何公司或个人都可以免费下载使用,包括用在商业用途上。

如果觉得 Vue Material 太过于简单,也可以看看之前也推荐的 BalmUIQuasar,同样是 Material Design 组件库。

原文链接:https://www.thosefree.com/vue-material

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-carbon,基于 vue 开发 material design 风格的移动端 WEB UI , 设计资源参考 CARBON FrameWork7。安装目前只使用 npm 安装,和使用 webpack 项目的应用npm install vue-carbon --saveimport Vue from 'vue' import VueCarbon from 'vue-carbon' Vue.use(VueCarbon)简单使用例如这个 Refresh Control 组件的demo页面<template> <div class="page">   <header-bar>     <icon-button slot="left" @click="back()" icon="arrow_back"></icon-button>     <span>Refresh Control</span>     <icon-button slot="right" @click="refresh()" icon="refresh"></icon-button>   </header-bar>   <content v-el:trigger>     <refresh-control @refresh="refresh" :trigger="$els.trigger" :refreshing="refreshing"></refresh-control>     <content-block>       <p class="refresh-desc">          按住 - 下拉 - 释放可以刷新数据       </p>     </content-block>     <list>       <item-cell v-for="item in items">         <item-title>           {{item}}         </item-title>       </item-cell>     </list>   </content> </div> </template>[removed]export default {  data () {    return {      items: ['1', '2', '3', '5', '6', '7', '8', '9', '10'],      end: 10,      refreshing: false    }  },  methods: {    back () {      window.history.back()    },    refresh () {      this.refreshing = true      setTimeout(() => {        this.refreshing = false        var arr = []        for (let i = this.end; i < this.end   10; i ) {          arr.push(String(i   1))        }        this.end  = 10        this.items = arr      }, 2000)    }  }}[removed]<style lang="less">.refresh-desc{  text-align: center;}</style>效果如下 标签:VueCarbon

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值