Nuxtプロジェクトの作成
create: 6/16/2020
NekohaApp-2020 Nuxt

Nuxt.js でプロジェクトを作成したい!

フルスクラッチで作ってもいいですが、テンプレートで初期化してくれる create-nuxt-app を使いたいと思います。

公式サイトより
create-nuxt-app を使用する

前準備

node.jsnpmyarn はインストール済みの前提で。

プロジェクトの作成

npx create-nuxt-app <project-name>

ウィザードが起動するので、適当に答えていきます。
今回は下記の構成にしました。

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in nekoha-2020
? Project name → nekoha-2020
? Project description → NEKOHA APP 2020
? Author name YOSHIDA → NEKOHA
? Choose programming language → TypeScript
? Choose the package manager → Yarn
? Choose UI framework → Buefy
? Choose custom server framework → None (Recommended)
? Choose the runtime for TypeScript → Default
? Choose Nuxt.js modules → Axios
? Choose linting tools → ESLint, Prettier, Lint staged files, StyleLint
? Choose test framework → Jest
? Choose rendering mode → Universal (SSR)
? Choose development tools → jsconfig.json (Recommended for VS Code)

全部選び終えると、 Choose the package manager の項目で選択した yarn でインストールが始まります。
人気のTypeScriptと、個人的に好きで使い慣れているBuefy で作っていきます。

とりあえず起動してみる

インストールできたら、もう起動の準備はできています。

yarn dev

http://localhost:3000 が起動します!

開発用の設定

テンプレートそのままではルートディレクトリにいろんなディレクトリが存在します。
設定以外の、自分でいじるソースはsrcディレクトリ1つにまとめておきたい。

ディレクトリの作成と移動

srcディレクトリを作成し、そこに components などのソースディレクトリ一式を移動します。
test は対象外です。

# ディレクトリを作成
mkdir src
# ソース用ディレクトリを移動
mv assets ./src
mv components ./src
mv layouts ./src
mv middleware ./src
mv pages ./src
mv plugins ./src
mv static ./src
mv store ./src

移動したら設定を変更

nuxt.config.jsjest.config.js が対象です。
ソースティレク取りが src 配下になったことを設定する必要があります。

nuxt.config.js
デフォルトのソースディレクトリはプロジェクトルートですが、srcDirで変更できます。

# nuxt.config.js
{
  // ソースディレクトリの変更
  srcDir: 'src',

  // 開発用httpポートの変更(任意)
  server: { port: 5555 },
}

ついでに、他のプロジェクトと競合しないように http ポートも変更しておきました。

jest.config.js
ソースを移動してしまうと、そのままではjestのテストが通りません。
<rootDir><rootDir>/src に全置換します。

初期状態ではこんな感じになりました。

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^~/(.*)$': '<rootDir>/src/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/src/components/**/*.vue',
    '<rootDir>/src/pages/**/*.vue',
  ],
}

yarn test で 1pass すれば OK です!

pug 使いたい

VSCode 使ってると、 <template lang="pug"> が当たり前のように候補に出てきて、そのまま使えてしまったのですが、ビルドするには依存モジュールを追加する必要があります。
package.jsonpug-plain-loaderpug を追加しましょう。

yarn add -D pug-plain-loader pug

これで pug で記載された vue ファイルもコンパイルできます!