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 はアリかも。