Vue 2.0 发布以来，很多 vue 的开源项目都开始了升级计划，我也思考着 vue-carbon 的升级之路，9月开工，11月完工， Muse UI 闪亮登场。
先睹为快
Muse UI 主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用，先上地址:
https://github.com/museui/muse-ui
官网和文档在这：
特性
-
基于 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.cssimport 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
