Help us understand the problem. What is going on with this article?

create-nuxt-app v3.2.0を使ってNuxt+Typescriptのプロジェクトを構築する

まえがき

create-nuxt-app コマンドを使用してTS+Nuxtプロジェクトを作成しようとしたところ、いつの間にか仕様が変わっていてちょっと感動したので書いてみることにしました。

なお、本記事内ではNuxtのmiddlewareModuleを使ってAPIサーバーを構築することを前提に進めるているため、SSRになっております。
SPAの場合でもほぼ変わりはないかと思いますが、予めご留意ください。

プロジェクトの開始

yarnを使っているとcliで対話式にプロジェクトが始められるようになっています。

npmでもバージョンが5.2以上ならnpxコマンドが使用できますので、そちらからでも上記同様対話式にプロジェクトを開始することが可能です。

【 yarn 】

$ yarn create nuxt-app {project-name}

【 npx 】

$ npx create-nuxt-app {project-name}

最近このNuxt界隈では、過去に Typescriptと相性が悪い と言われていたことを根に持っているかのように活発にTS向けのアップデートが行われており、
気づけばこのプロジェクトの開始でもフレームワークを JavascriptTypescript か選択できるようになったようです。

また、今回API機能を作りますので、Deployment targetをHosting Node.jsにしてください。

私が実行した際の対話の実行結果は以下です。
実際にやってみていただくとわかりますが、設問ないの選択可能項目も、そもそも設問自体も減ったような印象を受けました。

? Project name: {project name}
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: Semantic Pull Requests

ファイルの追記・修正

少し前まで(おそらく4月段階)まではここからTypescriptを使用するための準備が必要でした。

しかしこれまで必要だった加筆修正がいつのまにか最初から組み込まれたようで、具体的には以下の設定が不要になりました。

- Library
  - @nuxt/typescript-buildがバンドルされたのでインストール不要
  - @nuxtjs/eslint-config-typescriptもバンドルされましたのでインストール不要
  - @nuxt/typescript-runtime もバンドルされましたのでインストール不要
- nuxt.config.json
  - buildModule内、 `'@nuxt/typescript-build'`の記述が不要(最初から書いてある)
- tsconfig.json
  - デフォルトで準備されてます
- .eslintrc.js
  - 以前はTS用に書き換える必要がありましたが、デフォルトで @nuxtjs/eslint-config-typescript が記述されており、設定が反映済みでしたので修正不要

ただし、package.json内のscript項目で使用されている nuxt-ts について、デフォルトではグローバルにインストールされていることが前提になってしまっています。

もし yarn devnuxt-ts がないというようなエラーが出た際には以下のように package.jsonないのscriptを書き換えてください。

package.json
"script":{
  "dev": "npx nuxt-ts",
  "build": "npx nuxt-ts build",
  "start": "npx nuxt-ts start",
  "generate": "npx nuxt-ts generate",
}

それぞれ接頭に npx コマンドを追記するだけです。

不足ライブラリの追加

開発環境において不足しているライブラリを追加しましょう。

$ yarn add -E -D regenerator-runtime

(もしかするとなくても動くかもしれません。私はpugで書いているので不足しただけかも)

ソースフォルダを整理する

対話式でプロジェクト作成した場合、何がソースフォルダなのかもわからないですし、
APIサーバーを実装するにも後からわかりにくくなってしまうので、
一般的なフォルダ構成に修正したいと思います。

まず、プロジェクトルートに src ディレクトリを、さらにその中に api(API server) フォルダを作成しましょう。

続いて src ディレクトリ配下に以下のフォルダを移動します。

- assets
- components
- layouts
- middleware
- node_modules
- pages
- plugins
- static
- store

ワンライナーで移動させたい方は以下のコマンドを使ってください。

mv assets components layouts pages plugins static store middleware src/

config類の修正

nuxt.config.js に以下を追記します。

module.exports = {
  srcDir: 'src/' // <-これを追記
}

続いて vue-sim.d.ts ファイルをsrc直下に作成し、以下を記述してください。

[vue-sim.d.ts]
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

この vue-sim.d.ts はtsでvueを扱う際、vueファイルがそのままではimportできないため必要なファイルです。
また、vueのファイル位置も変わっているためtsconfig.jsonに追記・設定を行いましょう。

[tsconfig.json]
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [ "ESNext", "ESNext.AsyncIterable", "DOM" ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [ "./src/*" ],
      "@/*": [ "./src/*" ]
    },
    "types": [ "@types/node", "@nuxt/types" ]
  },
  "files": [ "src/vue-shim.d.ts" ], //← これを追記
  "include": [ "./src/**/**/*.ts", "./src/**/**/*.vue" ]
}

不要なファイル類の削除

CLIでプロジェクトを作成すると、丁寧に全フォルダに対してREADMEをつけてくれています。
ただ読む人は皆無だと思いますので、思い切ってリムってしまいましょう。

find ./src -name "*.md"|xargs rm

src配下に存在しているREADMEの根絶やしにします。

起動

ここまでできたらいったん起動してみましょう。

yarn devするだけです、そしてブラウザで localhost:3000 にアクセスしてみましょう。

issei_k
たまにデータセンターで妖精さんの仕業かな?って障害おきてません?それ、僕のしわざ。 記事の内容は個人の意見であり、所属団体を代表するものではありません。
zerobillbank
ブロックチェーン技術の会社です。Node.js、TypescriptやK8Sなどを用いた技術の色々をポストします。
https://zerobillbank.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした