【Nodejs,Nuxt.js】OrangePiにNuxt.jsをインストールして動かしてみた

前回、OrangePiにNode.jsを入れることが出来たんで、
Nuxt.jsをインストールして動かしてみたいなと思います。

動くといいんだけどね~。

１．Nuxt.jsってなんなのさ？

自分も胸張って言えるほどわかってないんですが、
Vue.jsを使うフロント側のWebアプリケーションフレームワークらしいです。
https://ja.nuxtjs.org/guide/

PHPのLaravelとかRubyのRubyOnRailsなどはMVCモデルの
コントローラ部分も含めたフレームワークなんですが、
Nuxt.jsはコントローラ部分はなく、
あくまで描画部分と描画を行うためのパラメータの管理のみあるみたいですね。
MVのみということなんでしょうか？

ただ、データベースとかを扱えないかといったらそんなことはなく、
そういった部分は他のプラグインとかで補完することが出来るみたいですね。

２．OrangePiにvueをインストールする

nodejsとnpmに関しては前回インストールしたテイで進めていきます。

まずVue.jsをインストールしましょう。
npmのコマンドで実行します。

npm install -g vue-cli

これでOKなはずです。

３．プロジェクトを作成する

プロジェクトはディレクトリ内で作ります。
先ずディレクトリを作成します。

cd
mkdir samplevue
cd samplevue

ディレクトリ内でプロジェクトを作成します。

vue init nuxt-community/starter-template testproject

プロジェクト名を聞かれますが、そのままで大丈夫です。
これで「testproject」ディレクトリが作成されていると思います。
これでプロジェクトが作成されました。

次にプロジェクトにNuxt.jsパッケージのインストールを行います。

npm install --save nuxt

インストール結構時間がかかります。
いろいろ落としているんだとは思うんですけどね。

インストールが完了したら、
インストール終了するとコンソール上に△マークが出てきます。

インストール終了後にフォルダ内を見てみると
すごい量のファイルとフォルダが出てきてますね…。

４．まず動かしてみる

Nuxt.jsは初期状態だとローカル環境のサーバーになっているらしく…
localhostしかアクセスできないようです。
なので、先ずは外部からアクセスできるようにする必要があります。

package.jsonに追加で書き込みます。

vi package.json

赤枠の部分を追記します。
この場合、IPアドレス指定のport:3000でアクセスが可能になります。

とりあえず先ず動かしてみましょうよ…

cd testproject
npm run dev

実行するとなんかビルドが始まります。
アクセスするURLも出てくるのでこれでアクセスしてみましょう。

しばらくするとビルドが完了して、
Webページの方も再読み込みされます。

お~。
出ましたね。成功です！
ちなみに、この時はプロジェクト直下の「pages/index.vue」ファイルが
このページを作成しているようです。


Vue.js、Nuxt.jsはOrangePiでもインストールできるので、
これで独立したミニサーバーみたいなことできるといいんですけどね~。
Nuxt.jsでの画面作成とかを次はやっていきたい。