vue.js ベースの QQ チャット ルーム

vue.js ベースの QQ チャット ルーム

導入

これは、スケーラビリティを最大限に高めながら基本的なカプセル化を提供する vue.js に基づいて開発されたチャット ルーム コンポーネント ライブラリです。

効果のデモンストレーションは次のとおりです。

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

MChat コンポーネントのレンダリング:

ここに画像の説明を挿入

ここに画像の説明を挿入

IChat コンポーネント効果図:

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

インストール方法

npmを使用してインストールする

npm で vue-mchat をインストールします

使用

main.js にインポートする

# npmダウンロード方法 // CSSを入力
'MChat/lib/MChat.css' をインポートします
// コンポーネントをインポートする import MChat from 'MChat'
//vue を使用してコンポーネントをロードします Vue.use(MChat)
#

二次開発の進め方

オプション1:

必要なプロジェクトに pacages フォルダをコピーし、main.js に vue-mchat を導入するだけです。

'./App.vue' からアプリをインポートします。
'../packages/index' から MChat をインポートします

Vue.use(MChat)

オプション2:

vue-mchat をベースに開発され、js ライブラリにパッケージ化されて導入されています。

vue-mchat ディレクトリで実行します。

npm 実行 lib

MChat のコンパイル済みファイル ライブラリを含む lib ファイルを取得できます。 lib ファイル全体をプロジェクトにコピーし、main.js に導入します。

'../lib/MChat.css' をインポートします
'../lib/MChat.umd' から MChat をインポートします

Vue.use(MChat)

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • QQ WeChat チャットルーム機能を Java で実装
  • 複数人チャットルームを実現する js コード
  • Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現
  • jsを使用して簡単なチャットルーム機能を書く
  • Node.js websocketはsocket.ioライブラリを使用してリアルタイムチャットルームを実装します
  • Node.jsでシンプルなチャットルームを作る
  • NODE.JS で遊ぶ (IV) - シンプルなチャットルームを構築するためのコード

<<:  CSS リスト モデルでのマーカー タグの使用

>>:  HTML の blockquote タグの使用と美化

推薦する

Linux で MySQL 8.0 バージョンをアンインストールする方法

1. MySQLをシャットダウンする [root@localhost /]# サービスmysqldを...

Vue-router プログラムナビゲーションの 2 つの実装コード

ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...

配列をフィルタリングするJavaScript

この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...

MySQL 外部キー制約とテーブル関係の概要

目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...

uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード

効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...

CSS3のfocus-withinセレクタの使用

擬似要素と擬似クラスところで、まずは疑似クラスセレクターと疑似要素セレクターについておさらいしておき...

Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装

目次1 v-ifとv-showの使用2. 計算と監視を区別する3 v-for トラバーサルでは、アイ...

XAML でボタンを円として再描画する方法

XAML レイアウトを使用する場合、インターフェイスを Metro 風にするために、一部のボタンでは...

CSS 表示テーブルの適応的な高さと幅の問題の解決策

定義と使用法display プロパティは、要素が生成するボックスのタイプを指定します。例示するこの属...

最もよく使用されるJavaScriptイベントについて詳しく学ぶ

目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...

mysql-connector-java.jar パッケージのダウンロード プロセスの詳細な説明

mysql-connector-java.jar パッケージのチュートリアルをダウンロードします: ...

vue で h5 側のアプリを開きます (Android か Apple かを判断します)

1. 開発環境 vue+vant 2. コンピュータシステム Windows 10 Profess...

MySQL の Docker インストールと設定手順

目次序文環境インストールMySQLコンテナを作成して起動する思い出させるMySQLコンテナコマンドを...

MySQL ストレステストツールの使い方

1. MySQL 独自のストレステストツール - Mysqlslap mysqlslap は、mys...

モバイル Web アプリ上の画像が鮮明ではなく、非常にぼやけているのはなぜですか?

なぜ?最も簡単に言えば、ピクセルは均等ではないということです。携帯電話に表示される写真はとても繊細に...