С момента публикации Vue 2.0 многие проекты vue с открытым исходным кодом начали свои планы обновления, и я тоже. В рамках vue 1.0 я опубликовал библиотеку vue: `vue-carbon `, и теперь он больше не совместим с vue 2.0. Поэтому я начал модернизировать проект, это заняло всего два месяца, vue-carbon завершил свое обновление витиевато, для дифференциации у него новое имя - Muse UI.

Будьте всем нетерпеливы, чтобы увидеть это

Пользовательский интерфейс Muse предназначен для мобильных приложений и некоторых настольных приложений, которые строго требуют совместимости с браузером. Исходный код выглядит следующим образом:



Museui / Muse-ui
Muse-ui - Библиотека пользовательского интерфейса Material Design для Vuejs 2.0 github.com



и следующие документы:



Muse-UI
Изменить описание museui.github.io



Функции

на основе vue 2.0
множество компонентов
множество тем, можно настраивать тему
можно использовать с другими плагинами vue, такими как vue-router, vue-validator
дружественный API

использование

npm install muse-ui - сохранить

Загрузка всего

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' // 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)

Пример использования 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 UI

Для согласования с vue 2.0 мне пришлось изменить многие API-интерфейсы vue-carbon. Поскольку изменений слишком много, я переименовал его в Muse UI, как новый фреймворк пользовательского интерфейса.

`Muse` происходит от древнегреческого мифа о богине, которая отвечает за науку и искусство, я надеюсь, что `Muse UI `может прекрасно сочетать науку с искусством, как и` Vue `.

Следовать за

Для перехода на Vue 2.0 пользовательский интерфейс Muse основан на версии 2.0, и сейчас это «бета», мы усовершенствуем этот проект.

* решить проблемы и рационализировать API
* добавить модульный тест
* добавить более простой API-интерфейс (например, простое сообщение, предупреждение, подтверждение и т. д.)
* добавить дополнительные компоненты (например, уведомление , Пагинация и так далее)
* разработка музы версии weex