Vuesaxを使ってみる

 Vuesaxを使ってみる

F38f6a8424ffd84d7869989856d90c6f?s=128

TanakaMidnight

December 20, 2018
Tweet

Transcript

  1. Vuesaxを使ってみる OsakaVueLT 2018/12/17 @TanakaMidnight

  2. 自己紹介 @TanakaMidnight SE Lang : Python(Django), Node.js Infra : Firebase

    Etc : Line 関係 (MessagingAPI, LIFF, Clova)
  3. Vuesaxとは Vue.js コンポーネントライブラリ  ・ BootStrap みたいに   簡単にレスポンシブなデザインをする。  ・よく使いそうな UI のパーツ

    ( コンポーネント ) が用意されているので、   いちいち作らなくても済む。
  4. Vuesaxの特徴 ・今風ないい感じのデザイン。 ・よく使う便利な UI パーツが多い。   Dialog, Loading, Tab, Table

    など  参考動画 : https://vimeo.com/276329344 ・部分的に適用が可能。 ・比較的ドキュメントが見やすい。(ただし英語)
  5. Install # install vuesax npm install vuesax # install material-icons

    npm install material-icons
  6. Use [main.js] import Vue from 'vue' new Vue({ el: '#app',

    router, components: { App }, template: '<App/>' });
  7. Use [main.js] import Vue from 'vue' import Vuesax from 'vuesax'

    import 'vuesax/dist/vuesax.css' import 'material-icons/iconfont/material-icons.css'; Vue.use(Vuesax) new Vue({ ←追加
  8. 比較Demo

  9. 似たようなライブラリ ・ Vuetify  より MaterialDesgn に準拠 (Google のサイトっぽい )  しているデザイン

    ・ BootstrapVue   jQuery に依存しない Bootstrap ・ Materialize   Vue.js に特化していおらず、見た目は Vuetify と似ている。  
  10. Materialize Logo ・・・ちなみに

  11. Materialize Logo ほぼ一致

  12. まとめ ・ Vue で使える UI コンポーネントライブラリは  いくつかあるのでいろいろ触ってみると面白い。 ・雰囲気凝ったっぽいデザインにするなら   Vuesax

    はアリかも。