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

mac環境で、Nuxt+Typescriptのプロジェクトを構築し、最終的にはAIアプリを開発しようと思います。
フロント側:Nuxt.js。サーバー側:python。

 

環境

OS/ミドルウェア バージョン
macOS Mojave 10.14
npm 6.14.8
yarn 1.22.5
Node.js v14.9.0
Nuxt.js v2.14.4
create-nuxt-app 3.2.0

 

1. Node.jsのローカル動作環境のインストール

Nuxt.jsを動作させるためにはNode.jsの動作環境が必要です。
なので、Node.jsのインストールをしていない場合は行ってください。

下記のURLを参考に構築します。手順通りにやればうまくいきます。

参考URL → [Mac, Homebrew] Node.jsのバージョン管理ツール、nodebrew導入手順

 

2. yarnのインストール

[yarnのインストール]

 

3. Nuxt.jsのインストール

下記のURLを参考に構築します。手順通りにやればうまくいきます。

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

 

4. 初期表示画面

 

補足

ディレクトリの設定

src/client ディレクトリにnode_modulesは移動しない。移動するとエラーが起きる。

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

tsconfig.json に以下を追記します。

importの使用例

ファイル:src/client/store/index.ts

参考URL → TypeScript の paths はパスを解決してくれないので注意すべし!

バーション確認方法

参考URL → Nuxt.jsをインストールしVue.jsアプリケーション開発環境を構築する入門編

テーマの変更方法

ファイル:nuxt.config.js

参考URL → [Nuxt.js]Vuetifyのテーマを用いる

 

5. Typescriptの設定

TypeScriptをwebpackで処理するためには「ts-loader」を利用します。

※「Module not found: Error:Can’t resoleve ‘ts-loader’」のエラーが出たのでインストールした。

[ts-loaderのインストール]

Nuxt.jsでclass構文でコンポーネントを作る際に便利なパッケージです。

[nuxt-property-decoratorのインストール]

yarn addのオプションについての参考URL → yarnのコマンドチートシート

 

また、次のタイプ宣言を追加して、Vueファイルのタイプを提供する必要があります。

[vue-shim.d.tsファイルの作成]

プロジェクト名/vue-shim.d.ts

参考URL → セットアップ

 

Typescriptの使用方法

class構文でコンポーネントの呼び出し

src/client/pages/index.vue

 

6. vuex-module-decoratorsの使用

Vuexのコーディングについて、クラス表記での記述を可能とするものです。

参考URL → Nuxt.js + TypeScript + Vuex で簡単な Todo リストを作るチュートリアル

 

7. axiosの使用

create-nuxt-appで「Nuxt.js modules: Axios」を選択したのに、使用できなかったので?「@nuxtjs/axios」をインストール

[axiosのインストール]

[nuxt.config.jsの設定]

[tsconfig.jsonの設定]

参考URL → Axiosモジュール

 

8.amcharts4の使用

今回は「TypeScript / ES6」を使用

[nuxt.config.jsの設定]

以下の設定をしないとimport出来なくてエラーが起きる。エラー内容「Unexpected token ‘export’」

参考URL → nuxtでは機能しません

[以下のURLから放射状ヒストグラムの設定]

参考URL → 放射状ヒストグラム

[TypeScriptの型エラーを修正]

 

ソースの公開

ブランチ「client」に最新のソースをpushしている。

ソースのURL → gitソース一覧

 

投稿者: samancha