7月 2020 - inokawablog

Nuxt導入のテンプレート

Nuxtを導入するにあたって今度のためにテンプレートが欲しかったので作っておく。 利用環境 エディター Nuxt VSCode 2.1.3 Docker フロントエンドとバックエンドを分離した構造にしている。これによりフロントエンド とバックエンドを柔軟に変更することができる。 Dockerfile # イメージ指定 FROM node:12.13.0-alpine WORKDIR /app # […]

Nuxt + TypeScriptのセットアップ

Nuxt + TypeScriptでセットアップを行います。 ディレクトリ構造はsrc/に主要なファイル群を配置しています。 導入 $ yarn add –dev @nuxt/typescript-build @nuxt/types @nuxt/typescript-runtime nuxt.config.ts 内の buildModules に @nuxt/typescript-build を […]

Nuxt + TypeScript に Stylelint + ESLint + Prettier を導入

Nuxtの環境にLinterとFormatterを導入して開発環境を快適にします。 prettier $ yarn add -D prettier VSCodeの設定 保存時自動整形の方が作業が捗るので、やりたい方は以下の設定を。 vscodeを使用している場合は,settings.jsonを以下のように設定すると保存時に自動で保存されます。 { "editor.formatOnSave […]

Nuxt のテストの実行環境を整える

Unitテスト・E2Eテスト・ビジュアルリグレッションテストの環境整備に関して書いていく。 Unit(単体)テスト Unitテストとはプログラムを構成する比較的小さな単位が個々の機能を正しく果たしているかどうかを検証するテストです。 関数単位でテストしたり、コンポーネント単位でテストしたりします。 Jestを使用します。 ライブラリのインストール $ yarn add -D jest ts-jes […]