環境構築

[gamiyama3110]

https://ja.nuxtjs.org/docs/2.x/get-started/installation ここベースに

node

t_yamagami@RN1021 nuxtSandbox[master #]$ nodebrew ls
v14.4.0

current: v14.4.0

v10.13 以上 満たしてるのでそっとしとく

プロジェクト生成

yarn使ってみる

t_yamagami@RN1021 nuxtSandbox[master #]$ yarn create nuxt-app nuxtSandbox

↑ これでやると、カレントにディレクトリが作られる nuxtSandbox/nuxtSandbox https://github.com/nuxt/create-nuxt-app/issues/582

階層1つ前でやってから、gitファイルをコピーする。

t_yamagami@RN1021 git$ ls -lta nuxtSandbox
total 0
drwxr-xr-x  11 t_yamagami  staff  352  2  9 22:17 ..
drwxr-xr-x   3 t_yamagami  staff   96  2  9 22:08 .
drwxr-xr-x   9 t_yamagami  staff  288  1 30 02:14 .git

t_yamagami@RN1021 git$ mv nuxtSandbox/ nuxtSandbox_2

yarn create nuxt-app nuxtSandbox

✨  Generating Nuxt.js project in nuxtSandbox
? Project name: (nuxtSandbox) # enter
? Programming language: (Use arrow keys) # TypeScript
❯ JavaScript
  TypeScript
? Package manager: (Use arrow keys) # Yarn
❯ Yarn
  Npm
? UI framework: (Use arrow keys) # Vuetify.js
❯ None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuesax
  Vuetify.js
  Oruga
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection) # Axios
❯◯ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) # ESLint
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
 ◯ Commitlint
? Testing framework: (Use arrow keys) # Jest
❯ None
  Jest
  AVA
  WebdriverIO
  Nightwatch
? Rendering mode: (Use arrow keys) # Single Page App
❯ Universal (SSR / SSG)
  Single Page App
? Deployment target: (Use arrow keys) # Server
❯ Server (Node.js hosting)
  Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection) # わからん none
❯◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
 ◯ Semantic Pull Requests
 ◯ Dependabot (For auto-updating dependencies, GitHub only)
? Continuous integration: (Use arrow keys) # わからん none
❯ None
  GitHub Actions (GitHub only)
? Version control system: (Use arrow keys) # Git
❯ Git
  None

UI frameworkについて https://inokawablog.org/vue-js/comparison-ui-framework/

Axiosについて https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9

t_yamagami@RN1021 git$ diff -r nuxtSandbox_2/.git/ nuxtSandbox/.git/
diff -r nuxtSandbox_2/.git/config nuxtSandbox/.git/config
8,13d7
< [remote "origin"]
<   url = git@github.com:gamiyama3110/nuxtSandbox.git
<   fetch = +refs/heads/*:refs/remotes/origin/*
< [branch "master"]
<   remote = origin
<   merge = refs/heads/master
t_yamagami@RN1021 git$ cp nuxtSandbox_2/.git/config nuxtSandbox/.git/config

差分こんなもんだった

[gamiyama3110]

🎉  Successfully created project nuxtSandbox
  To get started:
    cd nuxtSandbox
    yarn dev

  To build & start for production:
    cd nuxtSandbox
    yarn build
    yarn start

  To test:
    cd nuxtSandbox
    yarn test

  For TypeScript users.
  See : https://typescript.nuxtjs.org/cookbook/components/

t_yamagami@RN1021 nuxtSandbox[master #]$ yarn dev

ℹ NuxtJS collects completely anonymous data about usage.                                                                                                                                             
  This will help us improve Nuxt developer experience over time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participating? (Y/n) # n

とりあえず出た

[gamiyama3110]

nuxtでDBアクセスするつもりはない。 DBアクセスはAPIを挟む。