mya-ake/vue-tips-samples

Vue.js の tips 本のサンプルコード

vue-tips-samples

現場で使える Vue.js tips 集のサンプルコード

このリポジトリについて

現場で使える Vue.js tips 集は「商業版」と「同人版」の 2 種類が存在します。 master ブランチは商業版に対応したコードとなっています。 同人版のコードを確認されたい方はdoujinshi ブランチをご覧ください。

サポートページ

本書のサポートページを用意しました。 サポートページでは書籍内で書ききれなかった内容やサンプルコードのデモを置いています。合わせてご参照ください。

https://vue-tips-support-page.mya-ake.org

デモサイト

https://vue-tips-support-page.mya-ake.org/demo/

章とフォルダー

1 章 computed と filter

• computed_filter

2 章 お問い合わせフォームと戦う

• form

3 章 フォームのライブラリー実装編

• form

4 章 Vuex の tips

• form
• samples/modal_store
  • UI の操作にストアを使う例
• samples/vuex_transition_problem
  • 遷移前に表示が変わる問題の例

5 章 vue-test-utils でなにをテストするか

• form

6 章 vue-i18n の Lazy loading と vue-router

• i18n

注意

• npmでなくyarnを使っています
  • npmでも動くとは思います
• vue-cli v3を利用しています
  • ESLint はESLint + Prettierです
  • 追加で'singleQuote': true, 'trailingComma': 'all'を付けています
• Chrome で作業していたので他のブラウザの動作までは確認できていません
  • モダンブラウザなら動くはずです
  • モダンブラウザで動作していなさそうなブラウザがあった場合は@mya_akeまでご連絡ください
  • またはissuesにて起票お願いします

更新予定

更新予定などはこのリポジトリのissuesをご覧ください

vue-tips-samples's Issues

サポートページの充実

• JavaScript の class の解説
• JavaScript の分割代入あたりの解説

とか
デモもここに載せてしまいたい気持ち

4.2.3Vuexとtransitionの問題のサンプルコードを書く

Form のリファクタリング

• クラス名の再考
  • BaseFormItem じゃなく FormItemInterface の方がよいのではないか？
• インターフェースを全体的に見直す

サンプルの README のアップデート

formの確認画面と完了画面のナビゲーションガード作成

フォームの内容が空のままでも表示されてしまうので、ナビゲーションガードで止める

サポートページのインフラ構築

ref #12
AWS にしようと思ってたけど Netlify が楽かな

誤字のご連絡

P47 10行目

・フォームの要素のインスタンス生成と保持
・FormObserverに渡すための要素名の配列の生成
- ・フォームのの要素の 要素名:値 の組み合わせのobjectの生成
+ ・フォームの要素の 要素名:値 の組み合わせのobjectの生成

form のサンプルの modules のアップデート

touched-after-dirty の実装

computed_filter プロジェクトの modules アップデート

samples/modal_store の modules のアップデート

フォームのサンプルを VuePress に載っける

computedとfilter のサンプルを VuePress に載っける

vue cli v3 正式リリース対応

• computed_filter
• form
• 18n

サポートページのCI/CD用意する

Github Pagesでサンプルが公開できないかやってみる

i18n のサンプルを VuePress に載っける

サポートページのデモが直接アクセスすると404？

samples/vuex_transition_problem の modules のアップデート

i18n プロジェクトの modules アップデート

サポートページのベース作る

samples フォルダのやつらをサポートページに載せたい

テストコードのリファクタリング

• mixin のテストをして、 FormInput や FormTextarea のテストを薄くする

フォーム内の項目同士の状態によるバリデーションの追加

例えばこのような

• パスワードとパスワード（確認）のような2つの項目の値が一致するパターン
• とある項目が入力された状態になった場合は別の項目も必須になるパターン