テスト 単体テスト Jestの準備 1. Vue CLIのJestプラグインの導入 npx vue create xxxでのプロジェクト作成時にUnit Testingを有効にし、テストライブラリとしてJestを選択する […]

Vuex Vuexの準備 npx vue create xxxでのプロジェクト作成時に有効にする。（既存のプロジェクトにはnpx vue add vuexで追加する） src/store/index.jsに雛形が生成され […]

Vue Router Vue Routerの準備 npx vue create xxxでのプロジェクト作成時に有効にする。 Use history mode for router?: Yesでhistoryモードにする。 […]

Vue CLI Vue CLIの基本 npm install @vue/cli npx vue create my-cli（defaultを選択） cd my-cli npm run serveで実行、npm run b […]

コンポーネント(応用) <component>要素 コンポーネントの入れ物であり、コンポーネントを動的に切り替えることができる。 タブで表示内容を切り替える場合などに便利。 定義 呼び出し <compo […]

コンポーネント new Vue()とコンポーネントの違い dataオプションはコンストラクタの場合はオブジェクトだが、コンポーネントの場合はオブジェクトを返す関数でなければならない。※コンポーネントの場合は、それぞれが独 […]

ディレクティブ v-modelを利用するとvalue属性は無視される テキストボックスの初期値はvalue属性ではなくv-modelで紐づいた変数の値となる。 ラジオボタン、チェックボックス、選択ボックスも同様に、che […]

書籍「Nuxt.jsビギナーズガイド」のまとめ。 点数 88点 感想 細かくわかりやすく説明されていて、とてもよく理解することができた。 基本 メソッドと算出プロパティの違い 算出プロパティは引数を持つことができない 。 […]

Vuexストアのテスト 単一ファイルコンポーネントのテストにはJestプラグイン(vue-jest)が必要だが、まずピュアなJavaScriptだけで書かれたVuexストアのテストを体験してみる。 Vue Test Ut […]

テスト実行環境の構築 どこまでテストを書くか？ 以前はフロントエンドのテストはDOMやブラウザに依存するため、テストの寿命が短いにも関わらず作成コストが高いものであった。 今はある程度はDOMに依存しないテストが可能とな […]

サンプルアプリの作成（続き） ログイン情報の永続化 1. サーバサイドでもCookieを扱うことができるuniversal-cookieを導入 npm install universal-cookie 2. app/pa […]

サンプルアプリの作成 環境構築 npx create-nuxt-app test-blog以下を選択。 UI framework: Element Nuxt.js modules: Axios – Promi […]