Laravel + SQLite + Vue.js + Pug + Stylusの環境構築をサクッと行う

8474 ワード
pug Vue.js Laravel sqlite stylus sqlite テキストリンク

やること

  • 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で書いたモノが見える形になればゴールだと思います。
追記するものは、以下です。

welcome.blade.php
...
<!-- <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の設定変更

webpack.mix.js
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のコード

ExampleComponent.vue
<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のシンプルなフレームワーク)は開発者が同じらしいです。めっちゃシンプルで最適化されたなモノが好きな人なんでしょうね。(とても共感します。)

参考

この記事たちがなければやってこれませんでした！
おかげであまり時間かからなかったです。ありがとう(๑˃̵ᴗ˂̵)‬♪
- Vue.js + Pug + Stylus のサンプル開発環境
- LaravelからVue.jsを使う最短レシピ
- LaravelのDBをSQLiteに変更する
- Stylus入門したときのまとめ