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のインストール]
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
に以下を追記します。
1 2 3 |
export default { srcDir: 'src/client' } |
tsconfig.json
に以下を追記します。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "compilerOptions": { 省略 "paths": { "~/*": [ "./src/client/*" ], "@/*": [ "./src/client/*" ] }, }, } |
importの使用例
ファイル:src/client/store/index.ts
1 2 |
// src/client/utils/store-accessor.ts をインポート import { initialiseStores } from '@/utils/store-accessor' |
参考URL → TypeScript の paths はパスを解決してくれないので注意すべし!
バーション確認方法
1 2 3 4 5 6 7 8 9 |
// 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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のインストール]
1 |
$ yarn add -D ts-loader |
Nuxt.jsでclass構文でコンポーネントを作る際に便利なパッケージです。
[nuxt-property-decoratorのインストール]
1 |
$ yarn add -D nuxt-property-decorator |
yarn addのオプションについての参考URL → yarnのコマンドチートシート
また、次のタイプ宣言を追加して、Vueファイルのタイプを提供する必要があります。
[vue-shim.d.tsファイルの作成]
プロジェクト名/vue-shim.d.ts
1 2 3 4 |
declare module "*.vue" { import Vue from 'vue' export default Vue } |
参考URL → セットアップ
Typescriptの使用方法
class構文でコンポーネントの呼び出し
src/client/pages/index.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
6. vuex-module-decoratorsの使用
Vuexのコーディングについて、クラス表記での記述を可能とするものです。
参考URL → Nuxt.js + TypeScript + Vuex で簡単な Todo リストを作るチュートリアル
7. axiosの使用
create-nuxt-appで「Nuxt.js modules: Axios」を選択したのに、使用できなかったので?「@nuxtjs/axios」をインストール
[axiosのインストール]
1 |
$ yarn add -D @nuxtjs/axios |
[nuxt.config.jsの設定]
1 2 3 4 5 6 7 8 9 |
export default { 省略 /* ** Nuxt.js modules */ modules: [ '@nuxtjs/axios', ], } |
[tsconfig.jsonの設定]
1 2 3 4 5 6 7 8 9 10 |
{ "compilerOptions": { 省略 "types": [ "@types/node", "@nuxt/types", "@nuxtjs/axios" ] }, } |
参考URL → Axiosモジュール
8.amcharts4の使用
今回は「TypeScript / ES6」を使用
[nuxt.config.jsの設定]
以下の設定をしないとimport出来なくてエラーが起きる。エラー内容「Unexpected token ‘export’」
1 2 3 4 5 6 7 8 9 10 |
export default { 省略 /* ** Build configuration ** See https://nuxtjs.org/api/configuration-build/ */ build: { transpile : ['@amcharts/amcharts4'] }, } |
参考URL → nuxtでは機能しません
[以下のURLから放射状ヒストグラムの設定]
参考URL → 放射状ヒストグラム
[TypeScriptの型エラーを修正]
1 2 3 4 5 6 7 |
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ソース一覧