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 をよろしくお願いいたします。