Allied ArchitectsAllied ArchitectsEngineer Blog

第一章2 『sailを使用した環境構築とVueとtailwind CSSのインストール』

2022/02/18 Docker

動作確認済み環境

  • macOS Catalina v10.15.7 (Intel)
  • macOS Big Sur v11.5.1 (Apple M1)

Docker Desktop をインストールする

Docker Desktop for Mac and Windows | Docker

 

Getting Started On macOS

この手順に従えばあっという間に環境構築ができる。

これはLaravelについての記事なのでdockerについては書かない。

Laravel – The PHP Framework For Web Artisans

ターミナルで以下を実行する。

この時点で環境構築は終わっているが、mysqlに入っているデータを見るために毎回

docker compose exec mysql bash -c 'mysql -u sail -ppassword'

からの

use todo_list;

select * from todos;

とか打つのめんどくさいのでphpmyadminを使えるようにする。

 

docker-compose.ymlに以下を追加する。

 

Laravelの画面確認

127.0.0.1:80にアクセスする。

macの外観モードをライトに設定してる人はこの画面。

ダークに設定してる人はこの画面が出てくる。

 

phpMyAdminの画面確認

127.0.0.1:8080にアクセスする。

 

エイリアスを追加

./vendor/bin/sail

って毎回打つのも大変なのでエイリアスを追加しとく。

以下をコピペする。

:wq で保存して抜ける

更新を反映させる。

 

エイリアスの確認

こんな感じに表示されれば成功。

 

タイムゾーンの設定

今回はtodoに期限を設定してるのでタイムゾーンを日本時間にしておかないとわけわからなくなるので設定しておく。

config/app.phpを編集。

 

ロケールの設定

これやるとhtmlのlangがenからjaになって「日本語に翻訳しますか?」とか聞かれなくなる。

config/app.phpを編集。

 

Vueのインストール

 

Tailwind CSSのインストール

ターミナルで以下を実行。

 

tailwind.config.jsを以下のものに書き換える。

 

resources/css/app.cssを以下のものに書き換える。

 

webpack.mix.jsを以下のものに書き換える。

ターミナルで以下を実行。

れっちり
  • れっちり
  • 2021年新卒入社。letroの開発・運用業務を担当しています。

RELATION ENTRY

第一章11『子コンポーネントにプロパティを渡してグループ分けしたtodoを表示する』

第一章11『子コンポーネントにプロパティ...

2022/04/22 Vue.js

前回、todoを期限でグループ分けしたのでtodoGroupsの中のtodoにアクセスするためにはtodoGroups.within.today.todos[0]というようにする必要がある。また、todoGroups.within.todayまで到達したあとの処理は期限切れ、今日のもの、明日のもの、...

続きを読む

第一章10 『取得したtodoを期限でグループ分けする』

第一章10 『取得したtodoを期限でグ...

2022/04/18 Vue.js

取得した後に期限ごとにグループ分けをしたいので関数を追加する。 まず、getTodos関数によって取得したtodosはidの昇順になっているので、期限の日付で並び替えを行う。 以下の関数をmethodsに追加する。getTodos関数で取得してきたtodosをdataのtodos(以後this....

続きを読む

れっちりの記事一覧へ

ページTOPへ