专栏首页我的前端路web Muse UI — Vue2.0 和 Material Design 结合

web Muse UI — Vue2.0 和 Material Design 结合

Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场。

先睹为快

Muse UI 主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用,先上地址:

https://www.aiidol.com/museui/muse-ui

官网和文档在这:

https://www.smpeizi.com/

特性

基于 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>

bottomNav

关于 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

资料:

《bottomNav》:www.3sjtw.com

《Vue 2.0》:www.idiancai.com

《confirm》:www.pzzs168.com

《Notification》:www.dnshost.com.cn

原文链接:http://www.yyyweb.com/4748.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Vue原理】Event - 源码版 之 绑定组件DOM事件

    上一篇已经说了绑定正常标签的原生事件,今天是组件的原生事件,两者最终作用是一样的,但是过程有少少不同

    神仙朱
  • 【Vue原理】Event - 源码版 之 绑定组件自定义事件

    组件自定义事件其实是我最感兴趣的,我当时花了好多时间去探索的哈哈哈,探索完了之后,发现很简单的,可以先看下白话版了解下

    神仙朱
  • vuejs组件通信精髓归纳

    父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件。

    张炳
  • 【Vue原理】Event - 白话版

    特别是组件自定义事件,很想知道,给子组件绑定自定义事件,子组件是怎么触发的 巴拉巴拉的

    神仙朱
  • 【Vue原理】Event - 源码版 之 自定义事件

    Vue 封装的这个观察者模式,可以说是很完善了,这个可以独立抽取出来的在其他项目中使用的代码,只需要做一点点改动,把事件存储器换个地方(Vue 放在了实例上)

    神仙朱
  • Vue.js自定义tipOnce指令用法实例

    vuejs自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的...

    张炳
  • h5高效本地调试环境搭建

    调试是永远和开发分不开的一个话题,我相信没有谁能够不经过调试,一气呵成,将一个需求开发出来,如果是这样,一般都是一通操作猛于虎,一看bug在跳广场舞。嗯,段子讲...

    brzhang
  • 【Vue原理】Event - 源码版 之 绑定标签DOM事件

    今天就要开启我们 Component 探索之旅,旅途有点长,各位请坐好,不要睡着了

    神仙朱
  • SpringBoot 和Vue前后端分离入门教程(附源码)

    作者:梁小生0101 juejin.im/post/5c622fb5e51d457f9f2c2381

    格姗知识圈
  • 【Vue原理】生命周期 - 源码版

    简单到什么程度呢,就是直接执行你的 created 什么的,只是分在什么时候执行而已

    神仙朱

扫码关注云+社区

领取腾讯云代金券