最新消息:一个只会PHP的程序员不是好搬砖的

Muse UI — Vue2.0 和 Material Design 结合

业界资讯 时光弧线 521浏览 0评论

Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场。

先睹为快

Muse UI 主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用,先上地址:

https://github.com/museui/muse-ui

官网和文档在这:

https://museui.github.io/

特性

  • 基于 vue2.0 开发

  • 组件丰富

  • 丰富的主题,支持自定义主题

  • 可以很好的配合 vue 的其它插件vue-router , vue-validator 使用

  • 友好的 API

使用

npm install muse-ui --save

完整引入

import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)

按需引入

首先需要需要修改 webpack 的配置

{
  // ...
  module: {
    loaders: [
      {
        test: /muse-ui.src.*?js$/,
        loader: 'babel'
      }
    ]
  },
  resolve: {
    // ...
    alias: {
      'muse-components': 'muse-ui/src'
    }
  }
}

main.js

import Vue from 'vue'
import 'muse-components/style/base.less' // 全局样式包含 normalize.css
import appbar from 'muse-components/appbar'
import avatar from 'muse-components/avatar'
import {bottomNav, bottomNavItem} from 'muse-components/bottomNav'
import {retina} from 'muse-components/utils'

retina() // 1px 处理方案

// ...
Vue.component(appbar.name, appbar)
Vue.component(avatar.name, avatar)
Vue.component(bottomNav.name, bottomNav)
Vue.component(bottomNavItem.name, bottomNavItem)

示例 bottomNav 的使用

<template>
 <mu-bottom-nav :value="bottomNav" shift @change="handleChange">
    <mu-bottom-nav-item value="movies" title="Movies" icon="ondemand_video"/>
    <mu-bottom-nav-item value="music" title="Music" icon="music_note"/>
    <mu-bottom-nav-item value="books" title="Books" icon="books"/>
    <mu-bottom-nav-item value="pictures" title="Pictures" icon="photo"/>
</mu-bottom-nav>
</template>
<script>
export default {
  data () {
    return {
      bottomNav: 'movies'
    }
  },
  methods: {
    handleChange (val) {
      this.bottomNav = val
    }
  }
}
</script>

关于 Muse

为了配合Vue 2.0 改变了 vue-carbon 许多的 API,新增了许多的组件,由于改变的太多,于是更名为 Muse UI,做为一个全新的 UI 框架。

Muse 取自于古希腊神话中的女神,掌管科学与艺术。我希望 MuseVue 一样能将科学与艺术完美的结合。

后续的工作

为了跟随 Vue 2.0, Muse 以 2.0 版本为基础,现在是 alpha 版,后续会不断完善。

[ ] 修复现有的问题和合理化API

[ ] 增加单元测试

[ ] 增加更多快捷操作的api (简单的消息提示,alert, confirm 等等)

[ ] 增加其它的功能性组件(Notification, Pagination 等等)

[ ] 开发 weex 版的 muse

 

https://github.com/museui/muse-ui

转载请注明:53IT » Muse UI — Vue2.0 和 Material Design 结合

您必须 登录 才能发表评论!