https://github.com/yuu-eguci/nuxt-canvas-study
✌🏽✌🏽 In this repository, I tried to study Nuxt.js 2 + TypeScript + Object Style + Vuetify + Canvas + GitHub Pages.
https://github.com/yuu-eguci/nuxt-canvas-study
canvas github-pages i18n nuxt2 nuxtjs typescript vuejs vuetify
Last synced: about 1 year ago
JSON representation
✌🏽✌🏽 In this repository, I tried to study Nuxt.js 2 + TypeScript + Object Style + Vuetify + Canvas + GitHub Pages.
- Host: GitHub
- URL: https://github.com/yuu-eguci/nuxt-canvas-study
- Owner: yuu-eguci
- Created: 2022-03-31T09:51:17.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-27T02:21:32.000Z (over 3 years ago)
- Last Synced: 2023-03-03T13:12:35.293Z (over 3 years ago)
- Topics: canvas, github-pages, i18n, nuxt2, nuxtjs, typescript, vuejs, vuetify
- Language: Vue
- Homepage: https://yuu-eguci.github.io/nuxt-canvas-study/
- Size: 1.54 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nuxt-canvas-study
✌🏽✌🏽 In this repository, I tried to study Nuxt.js + Object Style + Vuetify + Canvas + GitHub Pages.
## Project setup
```bash
yarn install
yarn dev
```
## Nuxt + TypeScript の学び
- ベースは `npx create-nuxt-app PROJECT_NAME` で作る
- このコマンド↑の最中で Axios とか ESLint を選び損ねないように注意
- TypeScript
- https://typescript.nuxtjs.org/guide/setup/ に従って進めていくが、ドキュメントのバージョンが古いみたいで、やらないといけなかったのは types/vue-shim.d.ts を作るところだけ
- TypeScript を選択しても、 Nuxt の初期状態は JavaScript である
- Nuxt 3 についてはもっと進んでいて、最初から nuxt.config.ts になってるらしい
- StandardJS は使わない
- Vetur によるよくわからんエラーは、同じファイルの別のところに型を正しく指定していないことが原因で発生することが多い気がする。波線が出ているところが原因とは限らない
- this.$refs.Foo が型エラーを発生させるときは、 ;(this.$refs.Foo as any) とする
- 使わない引数には _ をつける。でないと @typescript-eslint/no-unused-vars に怒られる
- 新しいパッケージを足したら tsconfig.jsonのcompilerOptions.types[] に設定を足す、という流れがあるっぽい
- Nuxt
- page は pages/page/index.vue に定義する
- middleware は middleware/...ts に定義する (middlewares ではダメ。これは罠)
- components は components/container/...Container.vue と component/presentational/...View.vue で定義する
- utils は export function と export class のかたちで定義する
- static/ のファイルには router.base が適用されない
- 自作 component に v-model を組み込まず、 setVariable 関数を props に渡す
- `createElement()` has been called outside of render function. のエラーは nuxt.config.ts build.extend へ設定を追加して解消する
- plugin は https://typescript.nuxtjs.org/cookbook/plugins のコードを改造して実装する
- i18n は https://i18n.nuxtjs.org/ を参考に
- 複数 .env を利用するときは @nuxt/dotenv を使う。 dotenv はもう古い、という情報があるが、それは単一 .env を利用する場合の話。複数 .env.*** を利用するなら dotenv でなきゃダメ