Nuxt.js でプロジェクトを作成するまで ~ArXiv Bookmark開発記その5~

開発記第5弾はNuxt.jsでプロジェクトを作成するところまでを簡単にまとめたいと思います。

めっちゃ簡単にwebアプリケーションが作れちゃいます！！

ja.nuxtjs.org

ということで順にインストール手順をば紹介します。

1. Node.js とnpmのインストール

まずはこいつらをインストールしていきます。

ちなみに、

• Node.js: サーバーサイドjavascript
• npm: Node.jsのパッケージマネージャー

って感じです。

あ、今回はUbuntu18.04でのインストール方法についてです。

win, macの方はそれぞれ適当に調べてくだされ...

導入手順

node.jsのインストールには色々と方法がありますが、node.jsおよびnpmのバージョン管理もできちゃうn packageを使った方法でいきます。

まずはaptからnode.jsとnpmをインストールします。

$ sudo apt install -y nodejs npm

次に、n packageをインストール

$ sudo npm install n -g

そして、n packageを使ってstable なnode.jsをインストールします。

$ sudo n stable

ここまできたらaptで入れたnode.jsは不要なので削除しておきます。

$ sudo apt purge -y nodejs npm

再ログインしてちゃんとインストールできているかバージョンを確認してみましょう。

$ node -v

色んなサイトに色んな方法でインストール手順があると初心者はどれを採用したらいいか分からないので戸惑いますよね...

2. Nuxt.js

node.jsとnpmがインストールできればほぼやることは終了してます。

Nuxt.jsでプロジェクタを立ち上げるためには以下のコマンドを叩くだけです！

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

ね、簡単でしょ。

ちなみに、ここのnpxは最新のnpmをインストールしていれば自動で入っているはずです。

この後プロジェクトの詳細について何個か質問があるので適宜答えていきましょう。

? Project name <project-name>
? Project description <My legendary Nuxt.js project>
? Author name <Your name>
? Choose the package manager <npm or yarn>
? Choose UI framework <Vuetify.js> : UIフレームワークを選択.オススメはVuetify.js
? Choose custom server framework <None (Recommended)> : サーバーフレームワークを選択
? Choose Nuxt.js modules <Axios, Progressive Web App (PWA) Support> : axios, PWA対応を選択（後からでも導入可能ですが、axiosはほぼ必須なので入れておいていいでしょう）
? Choose linting tools <ESLint> : コードフォーマッターの選択
? Choose test framework <None> : テストフレームワークの選択
? Choose rendering mode Single Page App : アプリケーションモードの選択

こんな感じで私は選択しました。

ここまで来るとターミナルが忙しそうに依存関係をインストールしてくれるのでしばらく待ちましょう。

インストールが終われば

$ npm run dev

でアプリケーションを立ち上げられます。

http://localhost:3000

にアクセスして画面が表示されていればプロジェクト作成完了です。お疲れ様でした！！

まとめ

ターミナルで数行コマンドを実行するだけでアプリケーションを立ち上げられちゃうなんて、Nuxt.jsしゅごい...