Vue+Elementバックグラウンド管理フレームワークの統合実践

Vue+Elementバックグラウンド管理フレームワークの統合実践

新しく開発された背景管理システム。フレームワークに関しては、リーダーは AdminLTE テンプレートを使用する必要があります。これは実はとても簡単です。必要なスタイルと js ファイルをインポートするだけです。ここでは詳細には触れません。公式サイトを参照してください:https://adminlte.io/

効果図は以下のとおりです。

AdminLTE テンプレートは非常に便利です。興味のある人は誰でも自分で理解することができます。私はこのテンプレートを新しいシステムに埋め込んだだけで、それ以上の調査はしませんでした。

これでAdminLTEは終了です。本日のテーマである、Vue+ElementUI のバックグラウンド管理フレームワークについてお話しします。

Vue+ElementUI バックグラウンド管理フレームワーク

まず、Vue とは何かを理解する必要があります。 Vue公式サイト: https://cn.vuejs.org/

Vue の公式サイトでの Vue の説明:

Vue (発音は /vjuː/、view に似ています) は、ユーザー インターフェイスを構築するためのプログレッシブ フレームワークです。他の大規模なフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てているため、使い始めるのが簡単なだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツールチェーンとさまざまなサポートライブラリと組み合わせると、Vue は複雑なシングルページ アプリケーションを完全に実行できるようになります。

では、ElementUI とは何でしょうか?

Ele.me が開発した UI コンポーネントのセットだと聞きました。詳細はよくわかりません。こちらが ElementUI の中国公式サイトです: https://element.eleme.cn/

公式ドキュメントでは、ElementUI の設計原則が次のように示されています。

1. 一貫性

現実生活との一貫性: 現実生活のプロセスとロジックとの一貫性を保ち、ユーザーが慣れている言語と概念に従います。

インターフェースの一貫性: デザイン スタイル、アイコンとテキスト、要素の位置など、すべての要素と構造は一貫している必要があります。

2. フィードバック

コントロールのフィードバック: インターフェース スタイルとインタラクティブ効果を通じて、ユーザーが操作を明確に認識できるようにします。

ページフィードバック: 操作後、ページ要素の変更を通じて現在のステータスが明確に表示されます。

3. 効率性

プロセスを簡素化する: シンプルで直感的な操作プロセスを設計する

明確さ: 言語が明確で意味が明確であるため、ユーザーはすぐに理解して意思決定を行うことができます。

ユーザーの識別を支援: インターフェースはシンプルでわかりやすいため、ユーザーは思い出すのではなくすぐに区別することができ、ユーザーの記憶負担が軽減されます。

4. 制御性

ユーザーの意思決定: シナリオに基づいてユーザーに操作の提案や安全に関するヒントを提供できますが、ユーザーに代わって意思決定を行うことはできません。

制御可能な結果: ユーザーは、現在の操作の取り消し、ロールバック、終了などの操作を自由に実行できます。

これらはすべて公式サイトで紹介されています。

vue-element-adminはバックエンドのフロントエンドソリューションです

これはVue+ElementUIをベースに開発されているため、Vueのフロントエンドの準備がまだ必要です。前回のエッセイで確認できます。ここをクリックしてください。

中国語公式ヘルプドキュメントhttps://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

vue-element-admin は、vue と element-ui をベースにしたバックエンド フロントエンド ソリューションです。最新のフロントエンド技術スタックを使用し、i18 国際化ソリューション、動的ルーティング、権限検証が組み込まれており、一般的なビジネスモデルを改良し、豊富な機能コンポーネントを提供します。エンタープライズレベルのミッドエンドおよびバックエンド製品のプロトタイプを迅速に構築するのに役立ちます。

このプロジェクトはバックエンド統合ソリューションとして位置付けられており、二次開発用の基本テンプレートとしては適していません。このプロジェクトでは、使用しない可能性のある多くの機能が統合されているため、コードの冗長性が多く発生します。プロジェクトがこの側面に重点を置いていない場合は、それに基づいて二次開発を直接実行することもできます。

Gitをインストールしてデモをダウンロードする

Gitをダウンロードしてインストールするには、このアドレスhttps://git-scm.com/download/winにアクセスしてください。

Gitをダウンロードしたら、Gitからコードをプルすることができます。

git クローン https://github.com/PanJiaChen/vue-element-admin.git

あるいは、圧縮パッケージを Git から直接ダウンロードすることもできます https://github.com/PanJiaChen/vue-element-admin.git

ダウンロード後、プロジェクトのディレクトリ構造は次のようになります。

インストールの依存関係:

npmインストール

さまざまな奇妙なバグが発生するため、インストールに cnpm を使用しないことをお勧めします。npm のダウンロード速度が遅い問題は、次の操作を行うことで解決できます。

npm インストール --registry=https://registry.npm.taobao.org

まず、コンピューターに Node.js 環境がインストールされていることを確認します。公式サイトからダウンロードできます。

地域開発、プロジェクト開始

vue cli 2 はnpm run dev 、 cli 3 はnpm run serveです。

前の手順が正しければ、次のインターフェースが表示されます。

ログインすると、次のインターフェースが表示されます。このインターフェースは非常に美しいです

ルーティングと構成の左メニュー

ルーティングとは何ですか?公式の説明を参照してください:https://router.vuejs.org/zh/guide/

ルーティングにより、異なる URL を通じてさまざまなコンテンツにアクセスできるようになります。この URL は自分で設定できます。プロジェクト内にはそのようなフォルダはありません。この機能はルーティングです。

ルーティングの本質はハッシュ値です!

Vue のルーティング設定は 4 つのステップに分かれています。

定義: ルーティングコンポーネントを定義する

構成: ルーティングの構成

実装: ルートのインスタンス化

マウント: ルートをマウントする

Vue.js + Vue Router を使用してシングルページ アプリケーションを作成するのは非常に簡単です。 Vue.js では、コンポーネントを組み合わせてアプリケーションを作成できます。Vue Router を追加するときに必要なのは、コンポーネントをルートにマップし、それらをレンダリングする場所を Vue Router に指示することだけです。

ルートは src->router->index.js に配置され、views フォルダーもあり、もちろんこれらのページが配置されます。

まず、このプロジェクトでルーティングを構成するときにどのような構成項目が提供されているかを理解する必要があります。

//trueに設定すると、ルートは401、ログインなどのサイドバーや、/edit/1などの一部の編集ページに表示されなくなります。
hidden: true // (デフォルトは false)

//noRedirect が設定されている場合、パンくずナビゲーション リダイレクトでルートをクリックすることはできません: 'noRedirect'

//ルートの下に宣言された子の数が 1 を超える場合、自動的にネスト モードになります (コンポーネント ページなど) //子ルートが 1 つしかない場合、その子ルートはサイドバーにルート ルートとして表示されます (ブート ページなど) //ルートの下に宣言された子の数に関係なくルート ルートを表示する場合は、alwaysShow: true を設定すると、以前に定義されたルールを無視して常にルート ルートが表示されます alwaysShow: true

name: 'router-name' //ルーターの名前を設定します。必ず入力してください。そうしないと、<keep-alive> を使用するときにさまざまな問題が発生します。meta: {
  roles: ['admin', 'editor'] //このルートのアクセス権限を設定します。複数の権限の重ね合わせをサポートします title: 'title' //サイドバーとパンくずリストに表示されるこのルートの名前を設定します icon: 'svg-name' //このルートのアイコンを設定します noCache: true //trueに設定すると、<keep-alive>によってキャッシュされません(デフォルトはfalse)
  breadcrumb: false // false に設定すると、パンくずリストに表示されません}

したがって、ルート内の対応する位置に独自のメニュー オプションを追加するだけで済みます。

{
    パス: '/bingle',
    コンポーネント: レイアウト、
    リダイレクト: '/bingle/index',
    名前: 'ビングル',
    メタ: {
      タイトル: 'BingleTestMainMenu',
      アイコン: '例'
    },
    子供たち: [
      {
        パス: 'bingle',
        コンポーネント: () => import('@/views/dashboard/index'),
        名前: 'ビングル',
        meta: { title: 'BingleSubmenu1'、 icon: 'guide'、 noCache: true、 affix: true }
      },
      {
        パス: 'bingle1',
        コンポーネント: () => import('@/views/dashboard/index'),
        名前: 'bingle2',
        meta: { title: 'BingleSubmenu2'、 icon: 'guide'、 noCache: true、 affix: true }
      }
    ]
  },

すると、メニュー バーに追加したメニュー項目が表示されます。

Vue+Element のバックグラウンド管理フレームワークの統合実践に関するこの記事はこれで終わりです。Vue Element のバックグラウンド管理フレームワークに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue Element フロントエンドアプリケーション開発インターフェース言語国際化
  • vue-i18n を使用して中国語と英語をグローバルに切り替える方法
  • vue-element-admin でデフォルト言語を設定する方法

<<:  Linux で mysql-8.0.20 をインストールするための詳細なチュートリアル

>>:  Alibaba Cloud Server への Web プロジェクトのデプロイについて (5 つの手順)

推薦する

nginxフォワードプロキシとリバースプロキシの詳細な説明

目次フォワードプロキシnginx リバースプロキシnginx リバースプロキシ 02リバースプロキシ...

Dockerは単一のイメージを使用して複数のポートにマッピングします

必要:公式サイトのリソースサーバーは確かに1つのインスタンスでは使えず、複数のインスタンスを一緒に使...

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

Linux sedコマンドの使用

1. 機能紹介sed (Stream EDitor) は、コンテンツを 1 行ずつ処理するストリーム...

MySQL における TIMESTAMPDIFF ケースの詳細な説明

1.構文TIMESTAMPDIFF(unit,begin,end); 単位に従って時間差を返します。...

MySQLがブール型を返すいくつかの状況について簡単に説明します。

mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

WindowsにOpenSSLをインストールし、OpenSSLを使用して公開鍵と秘密鍵を生成します。

1. OpenSSL公式サイト公式ダウンロードアドレス: https://www.openssl....

JavaScript の矢印関数と通常の関数の違いの詳細な説明

この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...

Linux システムを起動時に自動的にスクリプトを実行するように設定する方法の例

序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...

Win10 DVWA のダウンロード、インストール、構成のグラフィック チュートリアルの詳細な説明 (初心者向け学習侵入)

コンピュータ システムが再インストールされ、侵入テスト学習環境 DVWA を再インストールする必要が...

MySQL のインデックスの原理とクエリの最適化の詳細な説明

目次1. はじめに1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 2...

Linux netstatコマンドの詳細な説明

目次Linux netstat コマンド1. TCP接続ステータスの詳細な説明2. コマンド形式3....

HTML Web ページ リスト タグ学習チュートリアル

HTML Web ページ リスト タグの学習チュートリアル。 HTML ページでは、リストはアウトラ...

Vueは適切なスライドアウトレイヤーアニメーションを実装します

この記事では、適切なスライドアウトレイヤーアニメーションを実装するためのVueの具体的なコードを例と...