Muse UI - a perfect UI framework with Vue 2.0 and Materail Design
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:
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 结合
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 Muse UI - a perfect UI framework with Vue 2.0 and Materail Design 的内容有疑问,请在下面的评论系统中留言,谢谢。