Muse UI — 基於 Vue2.0 的 Material Design UI 庫

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 取自於古希臘神話中的女神，掌管科學與藝術。我但願 Muse 和 Vue 同樣能將科學與藝術完美的結合。

後續的工做

爲了跟隨 Vue 2.0, Muse 以 2.0 版本爲基礎，如今是 alpha 版，後續會不斷完善。

• 修復現有的問題和合理化API

• 增長單元測試

• 增長更多快捷操做的api (簡單的消息提示，alert, confirm 等等)

• 增長其它的功能性組件（Notification, Pagination 等等）

• 開發 weex 版的 muse