Vue が Bibibili のホームページを模倣する際の問題

Vue が Bibibili のホームページを模倣する際の問題

エンジニアリング構造

プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインターフェースサービスであり、その他はフロントエンド部分です。プロジェクト構造は次のとおりです。

ここに画像の説明を挿入

スクリーンショットを実行

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

仕組み

実行する前に、NodeとVueのランタイム環境をローカルにインストールしておく必要があります。プロジェクトが正常に動作することを確認するには、以下を実行してください。
インターフェースデータを取得するためのbilibili-api。

バックエンド インターフェースを実行します。

cd ビリビリAPI
cnpm インストール
cnpm 実行 dev

フロントエンドを実行します。

cnpm インストール
cnpm 実行 dev

これで、ビビビリのホームページを模倣したVueに関するこの記事は終わりです。ビビビリのホームページを模倣したVueに関するより関連のあるコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • Vueはvuexを使用して、ホームページナビゲーションの異なるルートを切り替える方法を実装します。
  • Vue WeChatで共有されたリンクがホームページで開かれる問題の解決策
  • vue router+vuex はホームページのログイン検証ロジックを実装します
  • Vueビルドパッケージ化後のホームページの白い画面の問題を解決する
  • Vueプロジェクトのホームページ読み込み速度の最適化の詳細な説明

<<:  macOS SierraにApache2.4+PHP7.0+MySQL5.7.16をインストールする

>>:  Linux でプロセスを効果的に管理するための 8 つのコマンド

推薦する

nginx設定ファイルの場所を見つける方法の詳細な説明

よく知らないサーバーの場合や、かなり前にインストールした場所を忘れてしまった場合、構成ファイルの場所...

VueのTodoListケースの詳しい説明

<テンプレート> <div id="ルート"> <...

ES6分解課題の原理と応用

目次配列分割代入オブジェクトの分解代入分割割り当ての適用変数の値の交換関数から複数の値を返すマップ構...

Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明

1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...

ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策

目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...

Windows での PyTorch 開発環境のインストール チュートリアル

アナコンダのインストールAnaconda は、Python の使用を容易にするために作成されたソフト...

ウェブデザインにおける円形要素の使用例 25 選

本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...

CentOS7 のシステム サービスに Nginx を追加する方法

導入コンパイル、インストール、問題の解決後、Nginx は正常に動作していますが、現時点では Ngi...

モバイル端末のジャンプ問題を解決する(CSS遷移、ターゲット疑似クラス)

序文モバイル端末に触れたばかりの友人の多くは、クリックジャンプルーティング、特にVueルーティングを...

MySQLはデータベースのN+1クエリ問題を解決します

導入HibernateやMyBatisなどのORMフレームワークでは、部門に関連付けられたユーザーオ...

React Fiber構造の作成手順

目次リアクトファイバーの作成1. 始める前に2. React.renderから始める3. 終了リアク...

VUE + OPENLAYERSがリアルタイムポジショニング機能を実現

目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...

Vue は動的な円形のパーセンテージ進捗バーを実装します

最近、小さなプログラムを開発しているときに、次の設計図のような円形のパーセンテージ進捗状況バーを実装...

Vue 3 カスタムディレクティブ開発の概要

指令とは何ですか? Angular と Vue はどちらもディレクティブの概念を持っており、これは通...

Vue の foreach 配列と js の traversal 配列の書き方の説明

Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用し...