Muse UI - a perfect UI framework with Vue 2.0 and Materail Design

发表于 2017-01-05
更新于 2024-05-23
分类于 技术专栏
阅读量 7753
字数统计 3567

Since the Vue 2.0 published, many open-source projects of vue has started their upgrading plans, so do I. Within the vue 1.0, I had published a vue library-vue-carbon, and now it is not longer compatible with the vue 2.0. Therefore I started to upgrade the project, only taken two months, vue-carbon has finished its upgrading floridly, to differentiat, it has a new name - Muse UI.

Be all eagerness to see it

Muse UI is aim at the mobile application and some desktop application which strict requirement for browser compatibility. Source code as following:

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

and the document as following:

https://museui.github.io/

Features

  • based on vue 2.0
  • abundant components
  • abundant themes, can be customized theme
  • can be used with other plugins of vue, such as vue-router, vue-validator
  • friendly API

Usage

npm install muse-ui --save

Loading all
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)
Loading what you need

Firstly you need to update your webpack configuration

{
  // ...
  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' // including normalize.css in global style
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 solution

// ...
Vue.component(appbar.name, appbar)
Vue.component(avatar.name, avatar)
Vue.component(bottomNav.name, bottomNav)
Vue.component(bottomNavItem.name, bottomNavItem)
Example of bottomNav usage
<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>

About Muse UI

For coordinate with vue 2.0, I had to change many APIs of vue-carbon. As there are too much change, I rename it as Muse UI, as a brand new UI framework.

Muse is derived from the ancient Greek myth of the goddess which is in charge of science and art, I hope the Muse UI can as well combine the science with art perfectly as Vue.

Follow-up

For following with Vue 2.0, Muse UI is based on the 2.0, and now is beta, we will perfect this project.

  • solve the issues and API rationalization
  • add unit test
  • add more simple operation API(e.g simple message prompt, alert, confirm and so on)
  • add more components(such as Notification, Pagination and so on)
  • develop the muse of weex version

Note

This article has authorized by the authorship myron and translate it to English version, if you want to read the Chinese version, you can check out Muse UI — Vue2.0 和 Material Design 结合

公众号关注一波~

微信公众号

关于评论和留言

如果对本文 Muse UI - a perfect UI framework with Vue 2.0 and Materail Design 的内容有疑问,请在下面的评论系统中留言,谢谢。

网站源码:linxiaowu66 · 豆米的博客

Follow:linxiaowu66 · Github