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のインストール]

$ npm install --global yarn

1	$ npm install --global yarn

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

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

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

4. 初期表示画面

補足

ディレクトリの設定

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

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

export default {
  srcDir: 'src/client'
}

export default {

srcDir: 'src/client'

}

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

{
  "compilerOptions": {
    省略
    "paths": {
      "~/*": [
        "./src/client/*"
      ],
      "@/*": [
        "./src/client/*"
      ]
    },
  },
}

{

"compilerOptions": {

省略

"paths": {

"~/*": [

"./src/client/*"

"@/*": [

"./src/client/*"

]

}

importの使用例

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

// src/client/utils/store-accessor.ts をインポート
import { initialiseStores } from '@/utils/store-accessor'

1 2	// src/client/utils/store-accessor.ts をインポート import { initialiseStores } from '@/utils/store-accessor'

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

バーション確認方法

// Node.jsのパッケージ（Package ）を管理する（Manager）ツール
npm -v
yarn -v
// Node.js
node -v
// Nuxt.js
npx nuxt -v
// create-nuxt-app
create-nuxt-app -v

// Node.jsのパッケージ（Package ）を管理する（Manager）ツール

npm -v

yarn -v

// Node.js

node -v

// Nuxt.js

npx nuxt -v

// create-nuxt-app

create-nuxt-app -v

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

テーマの変更方法

ファイル：nuxt.config.js

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      /*変更*/
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        /*以下追加*/
        light: {
          primary: colors.red.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

vuetify: {

customVariables: ['~/assets/variables.scss'],

theme: {

/*変更*/

dark: false,

themes: {

dark: {

primary: colors.blue.darken2,

accent: colors.grey.darken3,

secondary: colors.amber.darken3,

info: colors.teal.lighten1,

warning: colors.amber.base,

error: colors.deepOrange.accent4,

success: colors.green.accent3

/*以下追加*/

light: {

primary: colors.red.darken2,

accent: colors.grey.darken3,

secondary: colors.amber.darken3,

info: colors.teal.lighten1,

warning: colors.amber.base,

error: colors.deepOrange.accent4,

success: colors.green.accent3

}

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

5. Typescriptの設定

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

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

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

$ yarn add -D ts-loader

1	$ yarn add -D ts-loader

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

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

$ yarn add -D nuxt-property-decorator

1	$ yarn add -D nuxt-property-decorator

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

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

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

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

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

declare module "*.vue" {

import Vue from 'vue'

export default Vue

}

参考URL → セットアップ

Typescriptの使用方法

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

src/client/pages/index.vue

<template>
  <v-layout column>
    <!-- FormCard.vueを読み込み-->
    <form-card>
  </v-layout>
</template>

<script lang="ts">
import {Vue, Component} from 'nuxt-property-decorator'

@Component({
  components: {
    FormCard: () => import('@/components/Form/FormCard.vue')
  }
})

export default class Index extends Vue {
}
</script>

<v-layout column>

<form-card>

</v-layout>

</template>

import {Vue, Component} from 'nuxt-property-decorator'

@Component({

components: {

FormCard: () => import('@/components/Form/FormCard.vue')

}

})

export default class Index extends Vue {

}

</script>

6. vuex-module-decoratorsの使用

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

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

7. axiosの使用

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

[axiosのインストール]

$ yarn add -D @nuxtjs/axios

1	$ yarn add -D @nuxtjs/axios

[nuxt.config.jsの設定]

export default {
  省略
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/axios',
  ],
}

export default {

省略

** Nuxt.js modules

modules: [

'@nuxtjs/axios',

}

[tsconfig.jsonの設定]

{
  "compilerOptions": {
    省略
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },
}

{

"compilerOptions": {

省略

"types": [

"@types/node",

"@nuxt/types",

"@nuxtjs/axios"

]

}

参考URL → Axiosモジュール

8.amcharts4の使用

今回は「TypeScript / ES6」を使用

[nuxt.config.jsの設定]

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

export default {
  省略
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    transpile : ['@amcharts/amcharts4']
  },
}

export default {

省略

** Build configuration

** See https://nuxtjs.org/api/configuration-build/

build: {

transpile : ['@amcharts/amcharts4']

}

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

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

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

[TypeScriptの型エラーを修正]

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
↓
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis<am4charts.AxisRendererCircular>());

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
↓
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererRadial>());

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());

↓

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis<am4charts.AxisRendererCircular>());

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

↓

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis<am4charts.AxisRendererRadial>());

ソースの公開

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

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

サマンサ

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

環境

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

2. yarnのインストール

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

4. 初期表示画面

補足

ディレクトリの設定

importの使用例

バーション確認方法

テーマの変更方法

5. Typescriptの設定

Typescriptの使用方法

6. vuex-module-decoratorsの使用

7. axiosの使用

8.amcharts4の使用

ソースの公開

関連

投稿者: samancha

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

環境

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

2. yarnのインストール

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

4. 初期表示画面

補足

ディレクトリの設定

importの使用例

バーション確認方法

テーマの変更方法

5. Typescriptの設定

Typescriptの使用方法

6. vuex-module-decoratorsの使用

7. axiosの使用

8.amcharts4の使用

ソースの公開

共有:

関連

投稿者: samancha

関連記事