備忘録的な @7wk

phpとjavascript系をメインに扱っていく予定。

久々のPHP。そしてLaravelを味見。

久々にPHPを触るのでメモ。

肩慣らしにブログっぽいアプリを作成。

フレームワーク勢力図も変わってるし、
PHP7も使ってみたいのでLaravel5.5を使ってみる。

とりあえず5.4のマニュアルを見つつ詰まったらググる感じで進めてみる。
インストール 5.4 Laravel

まだ正式版はリリースされていないので
dev-developでインストール

$composer create-project --prefer-dist laravel/laravel blog dev-develop
$cd blog
# 一応バージョン確認
$php artisan --version

>Laravel Framework 5.5-dev

# ビルトインサーバーで試してみる
$php artisan serve

>Laravel development server started: <http://127.0.0.1:8000>

これでとりあえず動作の確認はできた。

データベースはfirebaseを使おうかと思ったけど
ローカルで試すのでMySQLで良いかな。
しかしデータベースはすぐ触る予定もないので
必要になり次第入れるつもり。

javascriptcssはlaravel-mixでうまいことやってもらう事にする。
最近npmではなくyarnを使ってるのでyarnで入れる

※laravel-mixの解説はこの辺り
アセットのコンパイル(Laravel Mix) 5.4 Laravel

$yarn
$yarn add laravel-mix cross-env node-sass --dev

変更を検知してコンパイルしてもらう。

$yarn run watch

デフォルトのviewに
コンパイル後のcssとjsを読み込む

vueは更新頻度が低くなるはずなので webpack.mix.jsを一部変更

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['vue'])
   .sass('resources/assets/sass/app.scss', 'public/css');

んで、デフォルトのテンプレートで試す。
resources/views/welcome.blade.php に追記

<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>

この時点でjsのエラーが2つ

app.js:756 CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token
vendor.js:523 [Vue warn]: Cannot find element: #app

直す前にcssフレームワークTwitter bootstrapからbulmaに変更、
jQueryは使わないので削除

$yarn remove bootstrap-sass jquery
$yarn add bulma

resouces/assets/sass/app.sass
を修正

--// Bootstrap
--@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
++@import "node_modules/bulma/sass/utilities/initial-variables";
++@import "node_modules/bulma/bulma";

で、エラーを直す
resources/views/welcome.blade.php に追記

        <meta name="csrf-token" content="{{ csrf_token() }}">

      <div id="app">
        <example>サンプルを動かす</example>
      </div>

これで一旦エラーは回避。  
まだbootstrapとjQueryの残骸があるので削除
resouces/assets/bootstrap.js

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

これまででvueが動いていてエラーが起きていないのが確認できた。
そして今日はここまで。
気が向いたら続けてく。