f:id:ysmn_deus:20190719124755p:plain

どうも、靖宗です。

最近Nuxt.js（Vue.js）をさわり始めたのですが、フロントよわよわ界隈としてはなかなか良さげです。
（React.js触ってる人も両方やるとより理解度が高まるかも？という動機で触ってました）
毎回機能を作り込むまでは同じなので、自分用メモとして記事にしておこうと思います。

Nuxt.js プロジェクト構築
追加するかもしれないこと（メモ）

Nuxt.js プロジェクト構築

create nuxt-appでプロジェクト作成

まずはどのフレームワークでも大体同じだと思いますが、npxやyarnで初期プロジェクトを作成していきます。
最近npxはnodistにバンドルされないと言うことを知ったのでyarnでやります。

yarn create nuxt-app [PROJECT-NAME]

プロジェクトの設定はよしなに。
僕は

パッケージマネージャーはYarn
UI frameworkはVuetify.js
server frameworkはとりあえず無し
moduleはAxiosのみon
linter+Prettier両方on（よくわかんないけど雰囲気で使ってる）
test frameworkはJest
rendering modeはとりあえずSSRでやっとく（SPAとかに切り替えるの楽だし）

というかんじです。
この辺は慣れてきたら変わるでしょうが、いまはこんなで。

Vuetify使ってるとエラー吐きまくる

なんか下書きの時はうまくいってなかったんですが今はうまくいくみたいです
参考までに項目は残しておきます。
（indexはどうせ綺麗にするので）

たぶんVuetifyを入れたらエラーだらけになると思います。

✖ 4 problems (4 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

たぶんyarn lint --fixとかで修正できるのかもしれませんがなんか自分の環境ではうまくいかなかったので指摘がある箇所を手動で修正します。
どうせindex.vueとかはごっそり書き換えるので綺麗にします。

あとはpages/inspire.vueとかcomponents/VuetifyLogo.vueとか消す。これでたぶん通る。

Vuetifyとか使って無くても

一旦作成できたらyarn devぐらいはしてみてもいいかも。パッケージマネージャーのバグとかでそもそも動かない！とか発生する可能性があるので。

IDEの設定

これは人に寄りけりなのでJetBrain系じゃない人はスルーで。
WebStormのNew ProjectでEmpty Projectとして先ほど作成したプロジェクトフォルダをLocationに設定。

とりあえずRunでyarn devが走って欲しいので、右上のAdd Configuration...からRunの設定を追加。
設定するのは

Scripts: dev
Package manager: yarn

のとこだけ。設定できたらとりあえず動かしてみる。

とりあえずこれでOK。

WebStormのESLint（Prettier）の設定

この辺を参照。

qiita.com

メニューのPreference → Tools → File Watchers から追加します。
一覧の左下のプラスマークから追加しますが、「Prettier」という設定があるのでそこから修正するのが早いかもしれません。
一応自分はJavaScriptとTypeScriptとVueファイルの3種類のファイルウォッチャーを追加しました。

ESLintの設定

上でファイルウォッチャーとか登録すると、yarn generateするとえぐいことになるので.eslintignoreを設定しておきます。
任意ですが、たぶん.nuxt、dist、node_modulesあたりを避けておけば問題無いと思います。

.nuxt/
dist/
node_modules/

ディレクトリを変更する

Dockerとか使い出すとプロジェクトルートがぐちゃぐちゃになるので、Vueのファイル群は別の所に変更します。
srcディレクトリを作成して移動します。

mkdir src
mv assets components layouts middleware pages plugins static store ./src

ついでにREADME.md群を消去

find ./src -name README.md -type f | xargs rm -f

このままでは動かないのでnuxt.config.jsを変更。

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
+  srcDir: 'src',
  head: {

...

srcDir: 'src',を追加

とりあえずここでもyarn devを走らせておく。

とりあえずSSR（サーバーサイドレンダリング）の生成できるか試す

後から「なんかgenerateできへんねんけど・・・」とならないためにSSRを視野に入れてるならこの辺もやっとく。
特に設定変更していなければyarn generateで生成できるはず。

yarn buildが通るかもチェックしとくといいかも（基本的にyarn generateが通れば通る？）

ESLintのホットリロード

公式にも書いてあるとおり、ESLintをホットリロードできるようにしておきます。

環境変数とかの設定

dotenv入れるかどうか問題みたいなのもあるみたいなのですが、とりあえず現段階では導入してみたいと思います。
yarn add @nuxtjs/dotenvでモジュールを追加しておきます。

.envファイルを作成して設定したい環境変数をいれときます。とりあえずFirebaseを使う事が多いのでGOOGLE_APPLICATION_CREDENTIALSを設定したい場合は

GOOGLE_APPLICATION_CREDENTIALS = key.json

と書いておき、nuxt.config.jsに

require('dotenv').config()
...
  modules: [
    ...
    '@nuxtjs/eslint-module',
    '@nuxtjs/dotenv'
  ],
  env: {
    GOOGLE_APPLICATION_CREDENTIALS: process.env.GOOGLE_APPLICATION_CREDENTIALS,
  },

としておきます。ファイル頭のrequire('dotenv').config()ですが、ECMAScriptっぽくかくなら

import dotenv from 'dotenv'
dotenv.config()

ともできるっぽいですが、2行になるしどちらが美しいかは分かりません・・・

今後別の環境変数を追加する際は、.envファイルとnuxt.confi.jsの両方をいじることになると思います。

環境変数を切り替えるケースであれば、.envファイルを二つ使って実行することもできるそうです。

blog.ikedaosushi.com

gitの設定

何はともあれgitで管理しておいた方がいいのは間違いありません。
とりあえずデフォルトでgitは設定されているので、コミット＋プッシュしておきましょう。

CircleCIの設定

Jestを導入したという事はできればテストは自動でやって貰いたいものです。
CircleCIの設定ファイルを追加しておきます。

これであとはGitHubにCircleCIへのWebhookを追加しておけばdevelopブランチへのコミットで自動テストしてくれます。たぶん。

技術メモ

プログラミングとか電子工作とか

Nuxt.jsでいっつもやるやつ（初期の環境構築）