【公式準拠】Nuxt.js v2.12 系の TypeScript 導入手順
ヒカル🐧
@alclimb
最新の Nuxt.js v2.12 系では TypeScript の導入が CLI でできるようになり、とても簡単になっています。(以前は JavaScript プロジェクトから TypeScript 用に色々と設定変更が必要でした)
1. 環境
shell
> node -v v10.18.1 > npm -v 6.13.4
最終的な依存関係一覧
"dependencies": { "nuxt": "^2.12.1" }, "devDependencies": { "@nuxt/typescript-build": "^0.6.1" }
2. Nuxt.js のプロジェクトを生成
Nuxt.js の CLI は create-nuxt-app
で実行できます。なお、npm でグローバルにインストールしなくても npx コマンドで一時利用が可能となっています。
(1) npx create-nuxt-app コマンドでプロジェクトを作成
// Shell $ npx create-nuxt-app sample1
※ sample1 はプロジェクト名のため各々変更してよい
(2) プロジェクトのパラメータ指定
Choose programming language
で JavaScript と TypeScript を選択可能です。
create-nuxt-app v2.15.0 ✨ Generating Nuxt.js project in . ? Project name > sample1 ? Project description > My astonishing Nuxt.js project ? Author name > hikaru ? Choose programming language > TypeScript <ここでTypeScript指定可能> ? Choose the package manager > Npm ? Choose UI framework > Vuetify.js ? Choose custom server framework > None (Recommended) ? Choose the runtime for TypeScript > Default ? Choose Nuxt.js modules > Axios, PWA, DotEnv ? Choose linting tools > None ? Choose test framework > Jest ? Choose rendering mode > Single Page App
(3) カレントディレクトリを移動
// Shell > cd sample1
これで、レイアウト、コンポーネント、プラグイン、ミドルウェアなどで TypeScript が使用できるようになりました。
3. 動作確認
最後に確認のために以下のコマンドでデバッグ実行して http://localhost:3000 にて動作が確認できれば完了です。
// Shell > npm run dev
広告欄
WRITTEN BY
ヒカル🐧
@alclimb
SERIES
この記事に連載はありません。
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。