Slide 1
Slide 1 text
Vuesaxを使ってみる
OsakaVueLT
2018/12/17
@TanakaMidnight
Slide 2
Slide 2 text
自己紹介
@TanakaMidnight SE
Lang : Python(Django), Node.js
Infra : Firebase
Etc : Line
関係
(MessagingAPI, LIFF, Clova)
Slide 3
Slide 3 text
Vuesaxとは
Vue.js
コンポーネントライブラリ
・
BootStrap
みたいに
簡単にレスポンシブなデザインをする。
・よく使いそうな
UI
のパーツ
(
コンポーネント
)
が用意されているので、
いちいち作らなくても済む。
Slide 4
Slide 4 text
Vuesaxの特徴
・今風ないい感じのデザイン。
・よく使う便利な
UI
パーツが多い。
Dialog, Loading, Tab, Table
など
参考動画
:
https://vimeo.com/276329344
・部分的に適用が可能。
・比較的ドキュメントが見やすい。（ただし英語）
Slide 5
Slide 5 text
Install
# install vuesax
npm install vuesax
# install material-icons
npm install material-icons
Slide 6
Slide 6 text
Use
[main.js]
import Vue from 'vue'
new Vue({
el: '#app',
router,
components: { App },
template: ''
});
Slide 7
Slide 7 text
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({
←追加
Slide 8
Slide 8 text
比較Demo
Slide 9
Slide 9 text
似たようなライブラリ
・
Vuetify
より
MaterialDesgn
に準拠
(Google
のサイトっぽい
)
しているデザイン
・
BootstrapVue
jQuery
に依存しない
Bootstrap
・
Materialize
Vue.js
に特化していおらず、見た目は
Vuetify
と似ている。
Slide 10
Slide 10 text
Materialize Logo
・・・ちなみに
Slide 11
Slide 11 text
Materialize Logo
ほぼ一致
Slide 12
Slide 12 text
まとめ
・
Vue
で使える
UI
コンポーネントライブラリは
いくつかあるのでいろいろ触ってみると面白い。
・雰囲気凝ったっぽいデザインにするなら
Vuesax
はアリかも。