「Vue.js入門勉強会@渋谷」に参加してきました

• 2018/2/2
• https://connpass.com/event/72460/

[LT] Vue.js入門

• 高山氏

Vueの誕生

• angular開発に関わってた人が作った
• angularの中の好きだった部分だけ抽出したもの
• 中国で多く使われてる
  • 作者中国出身
• バージョンアルファベットの頭文字
  • 日本に関わるの多い

特徴

親しみやすい

• html,css,jsを知ってれば書ける
• for文とかangularっぽい
  • v-for

融通がきく

• プログレッシブJSフレームワーク
• 小さいアプリから大きくなっていっても対応できるような思想で作られてる

高性能

• ミニマムで20KB
• 仮想DOM

[LT] vuexについて

• 竹末氏

vuex使ってみた話

• vueにおけるflux実装
  • ステート
  • ゲッター
  • ミューテーション
  • アクション
• 入力フォームには不向き

store

• storeに処理がある
  • 通信とかも
  • アクションも定義してある
  • getterもmutationもstoreの中にある

mutation

• ここでstateを更新

weex

• react-nativeのvue版

[メインコンテンツ] Nuxt.js入門

• devneko氏
• Yamada Shinjiさん
• https://github.com/dotneet/nuxtdemo20180202
• https://www.slideshare.net/rararagi/nuxtjs-20180202-vuejs

Nuxt.js

• ユニバーサルなVueアプリを構築するFW

メリット

• SSR
• webpack設定いらない
• vuexとかvue-routerを使いやすくする
• モジュール機能によって機能追加可能
• minifyとかcode splittingとかhttp2とか対応

デモ

• ディレクトリ
  • pages
    • ファイルパスがURL
  • assets
    • SCSSとか画像とか
  • components
    • vueコンポーネント
  • store
    • vuexのストア
• ホットリロードもある
• storeの設定もいろいろ勝手にやってくれる

HelloWorldまで

npm i -g vue-cli
vue init nuxt-community/starter-template nuxtdemo
cd nuxtdemo
npm run dev

• http://localhost:3000