Vuesaxを使ってみる

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

    はアリかも。