LaravelとJavaスクリプト俯瞰

フレームワーク・ライブラリ俯瞰

.MathJax_Hover_Frame {border-radius: .25em; -webkit-border-radius: .25em; -moz-border-radius: .25em; -khtml-border-radius: .25em; box-shadow: 0px 0px 15px #83A; -webkit-box-shadow: 0px 0px 15px #83A; -moz-box-shadow: 0px 0px 15px #83A; -khtml-box-shadow: 0px 0px 15px #83A; border: 1px solid #A6D ! important; display: inline-block; position: absolute} .MathJax_Menu_Button .MathJax_Hover_Arrow {position: absolute; cursor: pointer; display: inline-block; border: 2px solid #AAA; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; font-family: 'Courier New',Courier; font-size: 9px; color: #F0F0F0} .MathJax_Menu_Button .MathJax_Hover_Arrow span {display: block; background-color: #AAA; border: 1px solid; border-radius: 3px; line-height: 0; padding: 4px} .MathJax_Hover_Arrow:hover {color: white!important; border: 2px solid #CCC!important} .MathJax_Hover_Arrow:hover span {background-color: #CCC!important}
Laravel
Laravel
ViewJava script framework
Vue
Vue
React
React
XHR
Inertia
Inertia
Livewire
Livewire
jQruery
jQruery
CSS
bootstrap
bootstrap
tailwindcss
tailwindcss
使用
使用
Livewire
Livewire
Blade
Blade
静的な外観を決定
静的な外観を決定
認証パッケージ
認証パッケージ
Jetstream又はBreeze
Jetstream又はBreeze
使用
使用
nascent-africa/jetstrapで置換可能
nascent-af…
npmでパッケージ管理
npmでパッケージ管理

DOM操作

DOM操作…
動的なUIを実現
動的なUIを実現
Viewer does not support full SVG 1.1

フォルダ構造との関連

public/js/app.js
public/js/app.js
Mix
Mix
resource/js/Pages/Auth/Login.vue
resource/js/Pages/Auth/Login.vue
npm run watchすると、コマンドが継続的に実行状態になりresource配下の変更を検知してpublic配下を更新してくれる。
npm run watchすると、コマンドが継続的に実行状態になりresource配下の変更を検知してpublic配下を更新してくれる。
npm run devを実行委すると、webpack.mix.jsに従いresourceの中身を使いpublic配下を更新する。
npm run devを実行委すると、webpack.mix.jsに従いresourceの中身を使いpublic配下を更新する。
node_modules/
node_modules/
npm install によりモジュールが配置される
npm install によりモジュールが配置される
resource/view
resource/view
resource/js/Pages
resource/js/Pages
bladeのviewのルート
bladeのviewのルート
Inertiaのrenderメソッドで指定するvueファイルのルート
Inertiaのrenderメソッドで指定するvueファイルのルート
Text is not SVG – cannot display