By YOSHIDA NEKOHA in NekohaApp-2020 — 2020年6月16日

Nuxtプロジェクトの作成

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

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

前準備

node.js と npm 、 yarn はインストール済みの前提で。

プロジェクトの作成

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ディレクトリ１つにまとめておきたい。

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

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.jsとjest.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.jsonに pug-plain-loader と pug を追加しましょう。

yarn add -D pug-plain-loader pug

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

前準備