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

はじめに

現在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もインストールまではしました。

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

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

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

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

動かすとこんな感じ。

https://twitter.com/masaru_pg/status/1250315106920960000

最後に現状のJSディレクトリの構成まとめ。

おわりに

今回はページ全体の構成を考える必要性を感じたので、ページレイアウトの構成を見直ししてから制作に取り掛かりました。

次回こそDB連携まで挑戦してみたいと思います。

現状のソースコード

このアプリは数々のチュートリアル・教材を参考に制作しています。

参考にさせていただいた教材は以下でご紹介させていただきます。

参考

Vue.js/Vuexを使ってTrello風アプリを作成しよう！

レイアウトを区切るタグ（header・main・aside・footer）

JSON.stringify()メソッド　JavaScript のオブジェクトや値を JSON 文字列に変換するメソッド

JSON.parse()メソッド　文字列を JSON として解析、また必要に応じて作成した値やそのプロパティを変換して、値を返すメソッド

JSON

公式ページのスタイルガイド　Key属性に関して

【JavaScript】スプレッド構文の便利な使い方まとめ