EeBlog(テクニカルブログ)

新人プログラマーのアプリ開発 第2回 Nuxtプロジェクトの作成

前回紹介したJava学習アプリは、Nuxt.jsとFirebaseを使い、サーバレス環境で開発したWebアプリです。

今回からは、Nuxt.jsとFirebaseでつくる簡単なアプリを例に、プロジェクトの作り方、フレームワークの便利な点などを紹介します！

この記事で分かること
・Nuxt.jsの導入方法
・Nuxt.jsでのプロジェクト作成

Nuxt.jsは、Vue.jsを使ったアプリケーションを作成するためのフレームワークです。決められたディレクトリ（フォルダ）にファイルを配置することで、ルーティング（ページ遷移の設定）が自動で行えたり、開発環境でのホットリローディングにより修正内容を即時反映できたりします。
アプリ開発の初心者にも使いやすいフレームワークです！

Nuxtの導入方法

まずNode.js（LTS版）をインストールします。


Node.jsをインストールすると、npm（Node.jsのパッケージ管理ツール）が一緒にインストールされます。インストールが成功していれば、コマンドでバージョンが確認できます。

node --version
npm --version


あとは、エディタがあればOKです。
使用するエディタは任意ですが、記事内ではVisual Studio Codeを使います。

プロジェクト作成

次のコマンドでプロジェクトを作成します。

npx create-nuxt-app /* project-name */


/* project-name */ には任意のプロジェクト名を指定します。
コマンド実行後は、対話モードでプロジェクトの設定が行われます。

サーバサイドのフレームワークを選択します。
今回は、サーバサイドを触らないので、Noneを選びます。

UIコンポーネントも選択できます。
Nuxt.js やVue.jsでは、HTML要素をヘッダー、ボタン、フォームなどのコンポーネント単位で管理します。UIコンポーネントを使えば、プロパティやCSSが設定済みの要素を簡単に使うことができます。
（個人的なオススメはVuetifyです！）

そのほかにも設定項目がありますが、今回は以下のようにしました。

? Project name nuxt_test_app
? Project description nuxt introduction project
? Use a custom server framework none
? Choose features to install (Press  to select,  to toggle all,  to
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Single Page App
? Author name eeb
? Choose a package manager npm


すべて選択すると、必要なモジュールのインストールや、設定ファイルの書き込みが自動で行われます。

Nuxt.jsのロゴが表示されれば、成功です。

> nuxt@2.6.1 postinstall C:\Users\{your-path}\nuxt_test_app\node_modules\nuxt
> opencollective || exit 0


                                      :-:
                                    .==-+:
                                   .==. :+- .-=-
                                  .==.   :==++-+=.
                                 :==.     -**: :+=.
                                :+-      :*+++. .++.
                               :+-      -*= .++: .=+.
                              -+:      =*-   .+*: .=+:
                             -+:     .=*-     .=*-  =+:
                           .==:     .+*:        -*-  -+-

  To get started:

        cd nuxt_test_app
        npm run dev

  To build & start for production:

        cd nuxt_test_app
        npm run build
        npm start


プロジェクトディレクトリ内に各種ディレクトリや設定ファイルが作成されています。


次回は、このプロジェクトを使って簡単なアプリケーションを作成します。

2019年4月5日 | カテゴリー：アプリ開発

│トップ│