やること
- LaravelでVue.js環境構築
- DBをSQLiteに設定(laradockとかだとMySQLとか使えばいいと思います。)
- Vue.jsをPugとStylusでかけるように設定する。
Laravelのインストール
まずLaravelの環境構築いつものやつ
❯ mkdir Laravel-test && cd Laravel-test
❯ composer create-project --prefer-dist laravel/laravel ./
❯ yarn install
SQLiteの設定
設定と起動のいらないSQLiteでDB構築は簡単で、テスト環境に需要があると思いました。
.envを編集します。
DB_CONNECTION=sqlite
# DB_CONNECTION=mysql
# DB_HOST=127.0.0.1
# DB_PORT=3306
# DB_DATABASE=homestead
# DB_USERNAME=homestead
# DB_PASSWORD=secret
以下のコマンドを実行
❯ touch database/database.sqlite
❯ php artisan migrate
終了です。
Vue.jsの設定
とりあえず、welcome.blade.phpにVue.jsで書いたモノが見える形になればゴールだと思います。
追記するものは、以下です。
...
<!-- <head>の中に追加 -->
<meta name="csrf-token" content="{{ csrf_token() }}">
...
<link rel="stylesheet" href="{{ asset('/css/app.css') }}">
...
<!-- </body>の手前に追加 -->
<div id="app">
<example-component></example-component>
</div>
<script src=" {{ asset('js/app.js') }} "></script>
...
Vue.jsの準備が整いました。
サーバと自動ビルド(watch)を起動
テキストエディタVSCode使ってるんですけど
ターミナルを2つ使用して2つのコマンドを同時に起動させている状態にします。
❯ php artisan serve❯ yarn watch
あとはブラウザでlocalhost:8000にアクセスして下にスクロールするとデフォルトのVue.jsの結果が見えるはずです。
※リロードは自分でしないといけなくてちょっと面倒。もっといい方法(hotを使うとか)は、あります。
とりあえず、普通のVue.jsはここまでで完了です٩( 'ω' )و
お疲れ様です。
Vue.jsにPugとStylusを導入
ここからは、番外編みたいな感じです。
Vue.jsのtemplateの中にPugとStylusを使えるようにします！
PugとStylusインストール
❯ yarn add -D pug pug-plain-loader
❯ yarn add -D stylus stylus-loader
Webpackの設定変更
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
module: {
rules: [{
test: /\.pug$/,
loader: 'pug-plain-loader'
},{
test: /\.styl(us)?$/,
loader: 'style-loader',
}],
}
});
終わりです。
Vue.jsのコード
<template lang="pug">
div.container
div.row.justify-content-center
div.col-md-8
div.card
div.card-header Example Component
div.card-body I'm an example component.ccc
</template>
<style lang="stylus">
.card-header
color: tomato
</style>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
表示結果
ここまで本当にお疲れ様です。
たのしいLaravel + Vue.jsライフでフルスタックなエンジニア体感しちゃいましょう！
もっと頑張るぞー！٩(ˊᗜˋ*)و
おまけ
他にもVue.jsに入れたいものがあればVue.js公式にやり方のってます。
これをみたりググったりして追加していけばいいと思います。
感想
LaravelがデフォルトでVue.jsをインストールする仕様になっているとは驚きました！
そしてVue.jsのtemplateをPugとStylusで書けるのもとても便利で驚きました！
(´⊙ω⊙`)
ちなみに
PugとStylusとExpress(Node.jsのシンプルなフレームワーク)は開発者が同じらしいです。めっちゃシンプルで最適化されたなモノが好きな人なんでしょうね。(とても共感します。)参考
この記事たちがなければやってこれませんでした！
おかげであまり時間かからなかったです。ありがとう(๑˃̵ᴗ˂̵)♪