Nuxt.jsとは？
JavaScriptフレームワークで有名な「Vue.js」のさらなるフレームワークとなります。
Nuxt.jsは、「ユニバーサルアプリケーション」を作成できる。
ユニバーサルアプリとは？
クライアントとサーバーどちらでも実行できるJavaScriptのアプリケーションのことです。(以前、「isomophic」と呼ばれていた概念になります。)
要は、同じJavaScriptのコードで、クライアントサイドSPAと、SSR(サーバーサイドレンダリング)を実現してしまうものになります。
Nuxt.jsを利用すれば、Vue.jsのビューと、Nuxt.jsを利用して簡単にユニバーサルアプリを作成することができます。
SPA(Single Page Application)とは？
下記の記事で解説しています。
SSR(サーバーサイドレンダリング)とは？
Nuxt.jsは、UIレンダリングを行うフロントエンドサーバーとして利用することができます。
フロントエンドのUIレンダリングは、Nuxt.jsで構築したフロントエンドサーバーに任せて、動的な情報はバックエンドサーバーから取得する設計とすることもできます。
バックエンドの情報を取得するには？
.vueファイルに「asyncDataメソッド」や「fetchメソッド」等を追加して、サーバーから情報を取得します。
それらのメソッドを使うことで、ビューをレンダリングする前にデータを取得し、完成したHTMLの状態でページに表示させることができます。
その他のNuxt.jsの用途
Nuxt.jsをミドルウェアとして利用して、express等のアプリケーションサーバーから使用することも可能です。
Nuxt.jsを「静的ファイルジェネレータ」としての活用する。
pagesディレクトリの中の、ページコンポーネントをそのままHTMLファイルとして出力する「静的ファイルジェネレータ」としての役割も行うこともできます。
出力されたHTMLには、Vue.jsや、Vuexが含まれているので、そのままWebアプリとして活用することもできます。
「firebase hosting」や「GitHub Pages」等の静的ファイルホスティングサービスを利用することにより、サーバーレスなアプリを構築することができます。
Nuxt.jsプロジェクトの作成手順
Ubuntu18.04で動作確認をしております。
Nuxt.jsをインストールする前に事前に、node.jsをインストールしておきます。
|
1 |
sudo apt-get install nodejs |
yarnをインストールします。
|
1 |
npm i -g yarn |
次に、vue-cliをインストールします。
vue-cliをグローバルのパッケージにインストールしています。
|
1 |
yarn global add vue-cli |
vue-cliを使う理由
npmを使ってゼロから作成した場合は、全て自分でディレクトリのファイルを作成しなければならないため非常に手間がかかる作業になります。
vue-cliを使い、公式のNuxt.jsテンプレートを使うことで、必要なディレクトリ構成が初めから用意されたプロジェクトから始めることができます。
Nuxt.jsのプロジェクトを作成します。
|
1 |
vue init nuxt-community/starter-template (プロジェクト名) |
initコマンドについて
vue-cliのテンプレートを作成することができるコマンドになります。
ただ、vue-cliのバージョンが3系では使えないレガシーなコマンドになります。
vue-cliのバージョンは下記のコマンドで確認することができます。
|
1 |
vue --version |
起動コマンド
作成されたプロジェクトディレクトリのルートに移動して、下記の二つのコマンドのどちらかを実行しましょう。
yarnを使う方法
|
1 |
yarn dev |
npmを使う方法
|
1 |
npm run dev |
アクセスできない問題
下記の手順を参考にして、Ubuntuに、Nuxt.jsのチュートリアル的なアプリをインストールしました。
https://qiita.com/corosuke_k/items/a5ca4c8184f431e0ee26
しかし、Chromeで「http://(IPアドレス):3000」にアクセスしても、下記のメッセージが表示されてアクセスできませんでした。
このサイトにアクセスできません接続が拒否されました。
ERR_CONNECTION_REFUSED
Ubuntのファイアウォールの3000番ポートもあいていることは確認しています。
どうやら、正解は、Nuxt.jsのコアの設定ファイルにて「localhost」からアクセスしか許可しないように、URL制御がハードコーディングされているようでした。
設定ファイルは、下記にありました。
node_modules/nuxt/lib/core/nuxt.js
下記のように、locahostでハードコーディングされている箇所を、アクセスしたいＩＰアドレスに書き換えました。
そうすることで、下記のようにＩＰ経由でもアクセスできるようになりました。
コマンド一覧
| コマンド | 説明 |
|---|---|
| nuxt | 開発サーバーを起動します。このコマンドで起動したサーバーはソースに変更があった場合は即座に反映される。（ホットリロード） |
| nuxt build | アプリをWebpackとしてビルドします。このコマンドは「nuxt startコマンド」の前に実行する必要があります。 |
| nuxt start | プロダクションモードでサーバーを起動します。 |
| nuxt generate | Nuxt.jsの静的ジェネレータの機能を使う際に使用するコマンドです。このコマンドでの出力結果は、distディレクトリに配置されます。 |
--helpオプション
各コマンドの細かい使い方はこのオプションで確認することができます。
Nuxt.js専用のコンポーネントについて(nuxt-link等）
コンポーネント一覧
| コンポーネント | 説明 |
|---|---|
| <nuxt-link> | 現状は、「Vue Router」の「router-link」のラッパーなので、同じように遷移先を指定します。 |
| <nuxt-child> | ネストされたルート内で、子コンポーネントを表示するために使用します。 |
| <nuxt /> | レイアウト内で、ページコンポーネントを表示するために使用します。 |
nuxt-linkコンポーネント
本体の場所
.nuxt/components/nuxt-link.js
nuxtコンポーネント
「layouts/」のファイル内容が反映されます。
404エラーが出た場合は、「error.vue」の内容が出力されます。
Buefyの組み込み
node_moduleにbuefyを追加します。
|
1 |
yarn add buefy |
pluginsフォルダに、buefy.jsというBuefyを読み込むための設定を記述します。
|
1 2 3 4 |
import Vue from 'vue' import Buefy from 'buefy' Vue.use(Buefy) |
nuxt.config.jsに、インポートしたpluginを登録するために、下記の記述を追加します。
|
1 2 3 |
plugins: [ '~plugins/buefy' ] |
「layouts/default.vue」に、下記のCSSの記述を追加します。
|
1 |
<style src="buefy/lib/buefy.css"></style> |
後は、下記で起動すれば、ＨＴＭＬにbuefyのCSSが適用された状態で起動することができます。
|
1 |
yarn dev |
ためしに、Buefyのドロップダウンリストのサンプルを実行してみる。
Buefyの公式ページのDocumentationに多くのWebパーツのサンプルが転がっています。
https://buefy.github.io/#/documentation/dropdown
その中で、ドロップダウンのサンプルコードを試しに、ビューに貼り付けて実行してみます。
pages/index.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<template> <section> <b-dropdown> <button class="button is-primary" slot="trigger"> <span>Click me!</span> <b-icon icon="menu-down"></b-icon> </button> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> <b-dropdown hoverable> <button class="button is-info" slot="trigger"> <span>Hover me!</span> <b-icon icon="menu-down"></b-icon> </button> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> <b-dropdown disabled> <button class="button" slot="trigger"> <span>Disabled</span> <b-icon icon="menu-down"></b-icon> </button> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> <b-dropdown> <p class="tag is-success" slot="trigger"> Custom trigger </p> <b-dropdown-item>Action</b-dropdown-item> <b-dropdown-item>Another action</b-dropdown-item> <b-dropdown-item>Something else</b-dropdown-item> </b-dropdown> </section> </template> <style scoped> .tag { cursor: pointer; } </style> |
実行結果
下記のように、公式サンプルどおりのドロップダウンリストを表示させることができました。
この記事へのコメントはありません。