新しく開発された背景管理システム。フレームワークに関しては、リーダーは 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 は 前の手順が正しければ、次のインターフェースが表示されます。 ログインすると、次のインターフェースが表示されます。このインターフェースは非常に美しいです ルーティングと構成の左メニュールーティングとは何ですか?公式の説明を参照してください: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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux で mysql-8.0.20 をインストールするための詳細なチュートリアル
>>: Alibaba Cloud Server への Web プロジェクトのデプロイについて (5 つの手順)
昨日、パソコンにPHP開発環境をセットアップした後、Apacheサーバーを再起動するとエラーが続きま...
この記事では、MySQL の自動作成時刻と変更時刻を設定する方法について説明します。ご参考までに、詳...
docker を使用すると、ファイルをマウントできない場合があります。これは、仮想マシンの共有フォル...
HTML フォーム タグのチュートリアル。このセクションでは、主に Web ページで INPUT タ...
この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...
以下のように表示されます。上記のように、置き換えるだけです。 Python3.6-MySql でファ...
目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...
最終的な解決策は最後の写真にありますリモート データベース ( Linux システム) に接続したと...
MySQL のインストールは比較的簡単なので、通常は次のステップに直接進み、注意が必要な点に集中する...
MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...
序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...
// これをインストールするのに丸一日かかったので、記録するためにメモを書きました。 //何か問題が...
ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...
ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...
SQL JOIN 句は、テーブル間の共通フィールドに基づいて 2 つ以上のテーブルの行を結合するため...