【Laravel+Vue.js】アプリ制作の記録⑤Vue.js側の作成

はじめに
Vue.js側の作成
- ページレイアウト構成を考える
- TOPページの作成をする
おわりに
参考

はじめに

現在Laravel+Vue.jsでのアプリ制作の記録です。

この記事ですることは以下です。(かなり手探りで制作しています。)

Vue.js/Vuexを使ってTrello風アプリを作成しよう！を参考にとりあえずVue.js側を作り込む。

※前回までの記録。

【Laravel+Vue.js】アプリ制作の記録①設計

【Laravel+Vue.js】アプリ制作の記録②プロジェクト作成

【Laravel+Vue.js】アプリ制作の記録③Vue Routerの実装

【Laravel+Vue.js】アプリ制作の記録④Vuexの実装

Vue.js側の作成

ページレイアウト構成を考える

ここでレイアウトタグをどのファイルで記載するか把握できていないことに気付いたので設計を見直しました。

以下の感じです。

これで少し頭の整理ができました。これを基にいくつかビューファイルを編集しました。

TOPページの作成をする

前回はVue.js/Vuexを使ってTrello風アプリを作成しよう！の3-1までを参考にVuexの実装をしました。

今回もこの教材を参考に実装していきます。

ここでの制作過程はCSS以外、教材をほぼ丸パクリ(土下座)なので割愛します。おススメの教材ですのでぜひ試してみてください♪

Vue.Draggableもインストールまではしました。

ですが、まずはミニマム機能で理解を深めたいと思ったので実装はしないで終えました。

(活性化の部分もデザインがまだないのでやっていません。)

作成が完了すると以下の感じになります。

超縦長。。。デザインがさみしいですね。笑

動かすとこんな感じ。

Techpitの教材フル活用でLaravel+Vue.jsに挑戦中。

とりあえずLaravelプロジェクト下でVue RouterとVuexの実装はできた。

これからDBの紐づけ。

デザインは一通り実装し終わってから🙃🙃#プログラミング初心者 #駆け出しエンジニアと繋がりたい #ポートフォリオ制作 #Techpit pic.twitter.com/pWPl9eoQo4

— まさる (@masaru_pg) April 15, 2020