概要

Vue.jsでチャットアプリを作成しました。

GitHub↓
https://github.com/hukuryo/Vue-ChatApp

機能説明

こちらが機能一覧になります。
・ログイン、ログアウト
・ユーザー登録
・メッセージ送信、編集、削除、一覧表示
メッセージやユーザーのデータはNode.jsでAPIを作り、JSONファイルに保存する仕組みになっています。

VueとNode.jsをインストール

この２つのインストールは以下の記事を参考にしました。
Vue.jsインストール
Node.jsインストール

インストールしたライブラリ

今回使用するライブラリこちらです。プロジェクトを起動したら、こちらの内容をコピーして、以下のファイルに貼り付けてください。
そして、一つ一つインストールしてください。

コードを紹介

ここからコードを紹介していきます。
今回は「chat-app」というプロジェクト名にしました。

App.vue

全てのViewファイルで適用されるファイルのソースコードです。
デザインはBootStrapとFontAwesomeを使用しました。

routerとstoreのコード

ここでは、routerとstoreのコードを紹介します。

routerのコード

storeのコード

Node.jsのソースコード

先にNode.jsのコードを貼っておきます。コードの簡単な説明は、コードの中に書いてあります。
このコードを書く前に以下のディレクトリにJSONファイルを２つ作成してください

Node.jsのコード

ログイン・ユーザー登録画面

まずはログイン画面から作成していきます。

ログイン画面

ユーザー登録画面

コンポーネント化したファイル

チャット機能に関するコード

ここからは、チャット機能に関するコードを紹介していきます。
同じく、コードの説明は、ソースコード内に書いてあります。
コンポーネント化したフォーム部分↓

メッセージ一覧ページ

編集ページ

最後に

このアプリは、多くのユーザーの利用を想定していないです。
なので、あくまで参考程度にしてください。
[cv:issue_marketplace_engineer]