ベースモデル要素の簡単な管理画面とVUE（：axiosを使用していないここで私は、データベースからデータを取得するためにPHPを使用し、エリアJS .PSで取得したデータを受信）に基づいて、
直接は、すべてのコードを添付します。データベースを：mywuユーザー名：rootパスワード：ルートデータシート：テストを
<？phpの
ヘッダ（ "コンテンツタイプ：text / htmlの;のcharset = UTF-8"）;
$ホスト= "localhost" を。
$ユーザ名= 'ルート';
$パスワード= 'ルート';
$デシベル= 'mywu';
データベースへの// 1.接続
$ CONN = mysqli_connect（$ホスト、$ユーザ名、$パスワード、$デシベル）。
もし（！$ CONN）{
ダイ（ '接続できませんでした：'。mysqli_error（$ CON））;
}
// 2がデータを受信するための空の配列を定義
$ usersArr = [];
mysqli_set_charset（$コネティカット「UTF8」）;
で得られた... 3つの//テーブルのテストデータ
$ user_menu = "テストから選択*";
// 4.送信SQLステートメント
リソース//結果セット; $ RES = mysqli_query（$ CONN、$ user_menu）
// 5.データリソースの結果セットへ
// $行= $ RES-> FETCH_ASSOC （）;
決意条件が真である場合、//ループであります
一方、（$行= $ RES-> FETCH_ASSOC（））
{
$ userArrは [] $行を=。
}
？>
<！DOCTYPE HTML>
<HTML>
<！ - 要素-ui.css、vue.js、VUE-router.js、要素-ui.jsノートの導入の頭部そのCDNの順序 - >
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<title>VUE项目</title>
<リンクのrel = "スタイルシート" のhref = "https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css">
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ SCRIPT>
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"> </ SCRIPT>
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"> </ SCRIPT>
</ head>の
<身体>
<divの言及のid = "アプリケーション"以上>
<！ -パディングビットをルーティング- >
<ルータビュー> </ルータビュー>
</ div>
<スクリプト>
//データベースからデータを取得し、usermenu JSONの解析に割り当て
VAR usermenu = <？phpのエコーjson_encode（$ userArr）;？>
//ホーム
ホーム= {constの
データ（）{
{戻り
、空の配列を受信するための// JSONデータ
メニューリスト：[]
}
}、
テンプレート：
`<divのスタイル= "高さ：100％;">
<EL-コンテナクラス= "家庭-CON" スタイル= "高さ：100％">
<EL-ヘッダ>
<IMG SRC = "http://style.wuliwu.top/LOGO" />
<スパン>バックオフィス・システム単一ページのバージョン</ span>の
</ EL-ヘッダ>
<EL-コンテナ>
<EL-脇幅= "200pxの">
<メニュー
デフォルトのアクティブ=「1」
背景色=「＃545c64」
テキストの色=「＃のFFF」
アクティブ・テキスト・カラー=「＃1 ffd04b」
>
//反復受け入れられたデータ
<EL-サブメニュー：インデックス= "item.id + ''" V-用= "メニューリスト内の項目"：キーは= "item.id">
<テンプレートスロット=「タイトル」>
<I CLASS = "EL-アイコン位置"> </ I>
<スパン> {{item.username}} </スパン>
</テンプレート>
<エル・メニュー項目のインデックス= "1-1" @クリック= "CLIUSER">ユーザーリスト</ EL-メニュー項目>
<エル・メニュー項目のインデックス= "1-2" @クリック= "clipic">写真</ EL-メニュー項目>
</ EL-サブメニュー>
</ EL-メニュー>
</ EL-さておき>
<EL-メイン>
<！ -プレースホルダをルーティング- >
<ルータビュー> </ルータビュー>
</ EL-メイン>
</ EL-コンテナ>
</ EL-コンテナ>
</ DIV> `、
作成した（） {
this.getMenuList（）
}、
方法：{
CLIUSER（）{
この。$のrouter.push（ '/ユーザー'）
}、
clipic（）{
この。$のrouter.push（ '/ uppicture'）
}、
getMenuList（）{
// JSONは、メニューリストに割り当てられて解析さ
this.menulist = usermenu
console.log（usermenu）
}、
}
}
//ユーザー
//ファイルのアップロードボタン
constのルータ=新しいVueRouter（{
ルート：[
{パス： '/'、成分：ホーム}
]
}）
新しいビュー（{
上： '#app'
データ：{}、
方法：{}、
ルータ
}）
</ SCRIPT>
<スタイル>
HTML、
体、
#app {
高さ：100％;
マージン：0;
パディング：0;
}
.ELヘッダ{
背景色：＃373d41。
パディング左：0;
色：#FFF;
表示：フレックス。
フォントサイズ：20ピクセル;
ALIGN-アイテム：センター;
}
.ELヘッダIMG {
マージン右：10pxの;
}
.EL-脇{
背景色：＃545c64。
}
.ELカード{
マージントップ：10pxの;
}
.EL-ブレッドクラム{
マージン下：15ピクセル;
}
</スタイル>
</ BODY>
</ HTML>
のみ、以下のコメントエリアで戸惑っ被写体があり、メッセージを残してください、ありがとうございました！