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 つのコマンド

推薦する

MySQL での order by の使用に関する詳細

目次1. はじめに2. 本文2.1 単一列のソート2.2 複数の列を並べ替える2.3 ソート方法2....

カレンダーウィジェットのネイティブJS実装

この記事の例では、カレンダーウィジェットを実装するためのjsの具体的なコードを参考までに共有していま...

Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...

Vue プロジェクトで axios をカプセル化する方法 (http リクエストの統合管理)

1. 要件Vue.js フレームワークを使用してフロントエンド プロジェクトを開発する場合、サーバ...

Vue3 で状態管理を実装するために provide を使用する方法

目次序文provide/inject を通じて Vuex 関数を実装する方法このプラグインをアプリケ...

IE6のバグと修正は予防戦略です

元記事:究極の IE6 チートシート: 25 以上の Internet Explorer 6 のバグ...

ウェブページ制作と饅頭の関係(体験の共有)

昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...

Docker コンテナに TensorRT をインストールする際の問題

Ubuntu にインストールされているバージョンをアンインストールします。 sudo apt-get...

doctype のマークアップ検証

しかし最近、この方法を使用すると問題が発生することがわかりました。コードを参照してください。コードを...

CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...

jQuery で従業員管理登録ページを実装する

この記事では、従業員管理登録ページを実装するためのjQueryの具体的なコードを例として紹介します。...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

JavaScript における継承の 3 つの方法

継承する1. 継承とは何か継承: まず、継承とは関係、つまりクラス間の関係です。JS にはクラスはあ...

echarts と vue.js を統合する際に発生するいくつかの問題の概要

序文現在、私は Beetlex のデータ分析プラットフォームに取り組んでいます。この製品の開発では、...