Nuxt.jsのプロジェクト立ち上げ

まえがき

開発案件をいくつか経験して、バックエンド（Rails）、フロントエンド（Nuxt.js）、インフラ（AWS、Firebase）の知見が備わったので、 拙くとも一つなにかサービスを作ることができそうなレベルになった！

私ごとだけども、一人暮らしから同棲生活と経験してきて、日々なあなあと過ごせてしまっているけども、 もうちょっと丁寧に生活できないかね？ 家事とか、買い物とか、ひとりならひとりなりのペースで。二人なら分担して。家族なら子供にお手伝いもさせて。 家の中のホワイトボードとか、共有のToDoメモ帳があればあらかた事足りるけども、 アプリにもうちょっとデザインして、使いやすくまとめられたらいいなと考えてました。

ということで、家事メモアプリ＜Kajiro＞を作ろうと思います。（お勉強がてら） 無事リリースまでこぎつけたらちょっと広告埋め込んで、小銭だけでも稼げたらなんてね・・・

やること

• Node.jsの準備
• Nuxtプロジェクト作成
• Nuxt.jsのインストール
• プロジェクトの作成

ミドルウェア系の準備

node.jsのインストール

nodebrewを使用して、安定版をインストール。stable便利だね！

$ nodebrew install stable

インストールできたNode.jsのバージョンを指定してuseを実行。

$ nodebrew use v14.15.4

Nuxtプロジェクト作成

npxでNuxtプロジェクトの雛形を作ってもらいます。

$ npx create-nuxt-app <project-name>

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in .
? Project name: kajiro-front
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios, Progressive Web App (PWA), Content
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

こんな感じで。 project-nameの箇所に"."とすると、現在のディレクトリに雛形を作ってくれます。 が、ディレクトリ内が空でないとエラーになるらしい。

調べたことメモ

Progressive Web App (PWA)

Webページをアプリのようにインストールして扱うことができるようにする技術。 AndroidでもiOSでも、ストアで扱ってもらえるようになったとかなんとかで、アプリ版開発までの繋ぎで使えそう。

Content

contentディレクトリから各種ドキュメントファイル（マークダウンとか）を取得できる。 content.nuxtjs.org

nuxtのインストール

$ npm install nuxt

最新のv2.14.12を使用することにしました。

起動

$ npm run dev

とりあえず実行できることを確認！