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 つの手順)

推薦する

Win7 で IIS7 Web および FTP サービスを完全にアンインストールする方法

昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...

MySQLで自動作成時間と変更時間を設定する方法の例

この記事では、MySQL の自動作成時刻と変更時刻を設定する方法について説明します。ご参考までに、詳...

DockerToolBox ファイルマウント実装コード

docker を使用すると、ファイルをマウントできない場合があります。これは、仮想マシンの共有フォル...

HTML フォームタグチュートリアル (3): 入力タグ

HTML フォーム タグのチュートリアル。このセクションでは、主に Web ページで INPUT タ...

初心者向けBootstrap 3.0学習ノート

この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...

Python3.6-MySql 挿入ファイルパス、バックスラッシュをなくす解決策

以下のように表示されます。上記のように、置き換えるだけです。 Python3.6-MySql でファ...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

Navicat の MySQL へのリモート接続が遅い理由の詳細な説明

最終的な解決策は最後の写真にありますリモート データベース ( Linux システム) に接続したと...

Win7 での mysql5.5 インストール グラフィック チュートリアル

MySQL のインストールは比較的簡単なので、通常は次のステップに直接進み、注意が必要な点に集中する...

Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法

MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...

MySQL の列から行への変換のヒント (共有)

序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...

Linux での MySql centos7 のバイナリコンパイルとインストールに関するチュートリアル

// これをインストールするのに丸一日かかったので、記録するためにメモを書きました。 //何か問題が...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...

さまざまなSQL結合を簡単に学ぶ

SQL JOIN 句は、テーブル間の共通フィールドに基づいて 2 つ以上のテーブルの行を結合するため...