NUXTJSを使用したVue.jsの始め方

はじめに
バージョンの選定
Node.jsインストール
NUXTJS (Vue.js)
起動

はじめに

この記事では、ウェブフロントエンジンであるNUXTJS (Vue.js) をUbuntuへインストールする方法を説明します。最終的にGoogle App Engineで運用することを考慮しています。

バージョンの選定

Google App Engineのスタンダード環境は特定バージョンのNode.jsをサポートしているので、対応するバージョンのものをインストールする。
2021/12/14現在、Node.jsはバージョン10、12、14、16が選択可能。
https://cloud.google.com/appengine/docs/the-appengine-environments

Node.jsインストール

公式に記載の方法でインストールを進める。
https://github.com/nodesource/distributions/blob/master/README.md#installation-instructions

NUXTJS (Vue.js)

create-nuxt-appでNUXTJS (Vue.js) をインストールする。
https://github.com/nuxt/create-nuxt-app#create-nuxt-app

$ npm init nuxt-app@latest test
Need to install the following packages:
  create-nuxt-app@latest
Ok to proceed? (y)

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in test
? Project name: test
? Programming language: JavaScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

🎉  Successfully created project test

  To get started:

        cd test
        npm run dev

  To build & start for production:

        cd test
        npm run build
        npm run start

  To test:

        cd test
        npm run test

起動

$ cd test
$ npm run dev

> test@1.0.0 dev
> nuxt


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

? Are you interested in participating? Yes


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                             23:50:10
ℹ Initial build may take a while                                                                                23:50:10
ℹ Discovered Components: .nuxt/components/readme.md                                                             23:50:10
✔ Builder initialized                                                                                           23:50:10
✔ Nuxt files generated                                                                                          23:50:10

✔ Client
  Compiled successfully in 4.08s

ℹ Waiting for file changes                                                                                      23:50:15
ℹ Memory usage: 172 MB (RSS: 320 MB)                                                                            23:50:15
ℹ Listening on: http://localhost:3000/                                                                          23:50:15

ウェブブラウザから http://localhost:3000/ にアクセスすると、以下の画面が表示される。