沐鳴平台首頁_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