沐鳴平台首頁_Muse UI — Vue2.0 和 Material Design 結合

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