さんさろ

さんさろ

プロダクトエンジニアの雑記＆技術、たまにドイツ

Laravel5.5でVue.jsを使うまで

技術

Laravel5.5 で Vue.js を使う

Laravel には Vue.js が標準で入っていると聞いていたので使ってみたいなーと思ってました。デフォルトで入ってると言っても、使うまでにちょびっと準備が必要ですので、その手順をメモします。

ちなみに、本家はこちら。

JavaScriptとCSSスカフォールド 5.5 Laravel


環境

  • Laravel5.5 （Vue.js 2.1）
  • CentOS 6.9


JS の依存解決はNPMを使っている

PHP の依存解決はご存知の通り composer ですが、JS の依存解決は npm を使っているらしい。

開発時点の元としてほとんどのアプリケーションで役立つだろうBootstrapとVueを提供しています。これらのフロントエンドパッケージをインストールするため、LaravelはNPMを使用しています。

composer で言うところの composer.json は、プロジェクトルートに package.json というのがあって、

JavaScriptアプリケーションを構築開始するために役立つよう、vueやaxiosのようなパッケージがデフォルトでLaravelのpackage.jsonファイルに含まれています。自身のアプリケーションの要求に合わせ、package.jsonファイルへ自由に追加、削除してください。

とのこと。

んで、Laravel5.5 のプロジェクト作った時点で Vue.js はすでにpackage.json に含まれていますので、プロジェクトルートで

$ npm install

を叩いてあげればいいんですけど、もちろん npm が入ってないと動きません。

なので、先に npm を入れます。


npm を入れる

そもそも、npm とは Node.js のパッケージを管理するツールのこと。

参考 便利なパッケージ管理ツール！npmとは【初心者向け】 | TechAcademyマガジン

CentOS6.9 に yum で入れます。

参考　node.jsをyumでインストールする(centos6.5) - Qiita

リポジトリは epel を使うとするところが多かったんですが、epel を使って入れると

$ node --version
v0.10.48
$ npm --version
1.3.6

「なんかバージョンがいやに低い……？？(´・ω・｀)」となって、とりあえず $ npm install 叩いてみてたら、見事にエラー出まくりで２時間くらいハマりました。

んで、多分これはそもそも npm のバージョンが低いな？と思って、nodejs と npm の入れ方を変えました。

参考 CentOSに新しめのnodeをインストールする | ハックノート

$ curl --silent --location https://rpm.nodesource.com/setup_10.x | sudo bash -

で、epel が入ってて途中でトランザクションのコンフリクトが起きたので、そうならないために、

$ pwd
/etc/yum.repos.d

こいつの中にいる、epel リポジトリを使わないように

enabled=0

リポジトリ設定ファイル中のenable をすべて 0 にして、

# yum install nodejs npm

したら、新しめのがインストール出来たようです。

$ node --version
v10.2.1
$ npm --version
5.6.0


npm を使って vue.js を入れる

んで、いざ。

プロジェクトルートで、以下を叩きます。

$ npm install
.
.
.
⚠ The `/home/vagrant/common/project-name/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
  ⚠ pngquant pre-build test failed
  ℹ compiling from source
  ✔ pngquant pre-build test passed successfully
  ✖ Error: pngquant failed to build, make sure that libpng-dev is installed
    at Promise.all.then.arr (/home/vagrant/common/project-name/node_modules/pngquant-bin/node_modules/bin-build/node_modules/execa/index.js:231:11)
    at process._tickCallback (internal/process/next_tick.js:68:7)
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pngquant-bin@4.0.0 postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pngquant-bin@4.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2018-05-26T09_14_31_922Z-debug.log

あるぇ、またエラってる＼(^o^)／

✖ Error: pngquant failed to build, make sure that libpng-dev is installed

とりあえずなんか足りないみたいなので、入れてあげる。

# yum install libpng-devel

これ入れてから再度チャレンジ。

$ npm install
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

> pngquant-bin@4.0.0 postinstall /home/vagrant/common/project-name/node_modules/pngquant-bin
> node lib/install.js

  ⚠ The `/home/vagrant/common/project-name/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
  ⚠ pngquant pre-build test failed
  ℹ compiling from source
  ✔ pngquant pre-build test passed successfully
  ✔ pngquant built successfully
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: minimist@1.2.0 (node_modules/fsevents/node_modules/rc/node_modules/minimist):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/home/vagrant/common/project-name/node_modules/fsevents/node_modules/rc/node_modules/minimist/package.json.3224473585'

added 120 packages in 64.377s

WARN は出てるけど、とりあえず行ったっぽい。

あともう一息。

$ npm dev run
.
.
.
 95% emitting

 DONE  Compiled successfully in 14075ms                                                         09:22:57
.
.

おお、なんとか終わったっぽい。

$ cd /home/vagrant/common/project-name/node_modules
$ ls
.
.
vue
.
.

ファイルがいっぱい出来てます。こっちにも。

$ cd /home/vagrant/common/project-name/public/js
$ ls
app.js

ふむ。

使い方はよくわかりませんが、それはこれから勉強していくということで。

これで一応、vue.js を使う準備が出来た、のかな…。多分。


参考

Laravel5.5でVue.jsを使ってみた - あ、しんのきです