[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - プロジェクトの概要

記事ディレクトリ

ケース	リンク
[フロントエンド] Vue+Element UI の場合: 一般的なバックグラウンド管理システム - ナビゲーションバー (動画 p1-16)	https://blog.csdn.net/karshey/article/details/127640658
[Frontend] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ヘッダー + ナビゲーションバーの折りたたみ (p17-19)	https://blog.csdn.net/karshey/article/details/127652862
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ホームコンポーネント: カード、フォーム (p20-22)	https://blog.csdn.net/karshey/article/details/127674643
【フロントエンド】Vue+Element UI事例：一般的なバックグラウンド管理システム・Echartsチャート作成：axiosパッケージ、模擬データシミュレーション実戦（p23-25）	https://blog.csdn.net/karshey/article/details/127735159
【フロントエンド】Vue+Element UIの場合：一般的なバックグラウンド管理システム・Echarts chart：折れ線グラフ、ヒストグラム、円グラフ（p27-30）	https://blog.csdn.net/karshey/article/details/127737979
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - パンくずリスト、タグバー (p31-35)	https://blog.csdn.net/karshey/article/details/127756733
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ユーザー管理: フォーム入力、ダイアログボックスのポップアップ (p36-38)	https://blog.csdn.net/karshey/article/details/127787418
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ユーザー管理: テーブルテーブルの追加、削除、変更、ページネーションページング、検索ボックス (p39-42)	https://blog.csdn.net/karshey/article/details/127777962
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ログインページログイン (p44)	https://blog.csdn.net/karshey/article/details/127795302
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - ログインページ機能: ログイン権限のジャンプ、ルートガード、終了 (p45-46)	https://blog.csdn.net/karshey/article/details/127849502
[フロントエンド] Vue+Element UI ケース: 一般的なバックグラウンド管理システム - 異なるユーザーにログインして異なるメニューを表示し、ルートを動的に追加 (p47-48)	https://blog.csdn.net/karshey/article/details/127865621

序文

このプロジェクトは半月に渡って行われました. この半月の間に、私は Vue 関連の文法規則しか理解していない初心者から、Vue に少し慣れている初心者に変わりました. ) プロジェクトを作成する場合: コンポーネント Thinking、axios、mock、cookie、vue-router、ElementUI。

プロジェクトを書いている過程で、以前はざっと目を通したり理解しただけだった知識が、プロジェクトの実際の適用を通じて鮮明になり、多くの知識とその理由が明らかになります。p1～p47まで、プロジェクトの小さな部分から始めて、ゆっくりとプロジェクトを組み立てます。次に、プロジェクトを上から下に見ていきます。

効果

プロジェクトがどのようなものか見てみましょう。

ログインページ

ここに画像の説明を挿入

表紙

admin と xiaoxiao の 2 人のユーザーがいます。

管理者：

username:admin
password:admin

シャオシャオ：

username:xiaoxiao
password:xiaoxiao

管理者ホーム

ここに画像の説明を挿入

折りたたまれたナビゲーションバー:

ここに画像の説明を挿入

シャオシャオのホームページ

左のメニューには 2 つのオプションしかありません。

ここに画像の説明を挿入

ユーザー管理

ページ：

ここに画像の説明を挿入
クリックして追加:

ここに画像の説明を挿入

クリックして編集する：

ここに画像の説明を挿入

要約する

プロジェクトのビルド

プロジェクト全体の依存関係:

"dependencies": {
    
    
    "axios": "^1.1.3",
    "core-js": "^3.8.3",
    "echarts": "^5.1.2",
    "element-ui": "^2.15.10",
    "js-cookie": "^3.0.1",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mockjs": "^1.1.0",
    "vue": "^2.6.14",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2"
  }