左側のVUEホーム+のナビゲーションメニュー

1. Mock.jsの
開発プロセスを開発中で分離の終わり、多くの場合、いくつかの厄介なシーンの前と後に発生した:
1。ボス、まだ出力インタフェースのドキュメントには、私がああやって多くの作業を行っていません!
2.バックエンドの弟、インターフェースはまだ書かれて、私はああテストしたいです!
前端と後端を分離した後、緊急もはやバックエンドインターフェイスの開発に依存する必要がメカニズムの必要性、そして今日の主役のmockjsのフロントエンドはそれを行うことができます

Mock.js発生器は、フロントエンドのデバッグおよび開発、フロントのプロトタイプと後端を助けるために、アナログデータであり、自動テストの効率を向上させるための手段。

:二つの重要な特徴は、フロントエンドを総なめにしたので、我々はすべてのMock.jsを知っているように
データの種類が豊富な
ランダムな文字、数字、ブール、日付、電子メール、リンク、画像、色などを生成するためのサポートを。
Ajaxリクエストの傍受は
、既存のコードを変更する必要があり、Ajaxリクエストを傍受することができ、それは応答データのシミュレーションを返します。

より多くのコンテンツ、クラウドMockjs公式見解「http://mockjs.com/」


注1:簡単なモック、背景データのオンラインシミュレーションプラットフォーム

使用して、手順2. Mock.js
2.1 mockjsは、信頼マウント
NPMは、開発環境でのみ使用mockjsの-D#をインストール

 

 

2.2導入され
、自動的にのみ使用していないときにモックモック開発環境のために、そして本番環境に詰め、我々はENVで設定を行うことができます
dev.env(1)
module.exportsは=(prodEnv、{マージ
NODE_ENV:「 『開発』 '
MOCK:'本当の"
})

 


(2)prod.env
module.exportsは= {
NODE_ENV: ' "製造"'、
MOCK: '偽'
}

 

(3)main.js
//開発環境が導入されますmockjs
process.env.MOCK &&ザ・は( '@ /モックを')が必要です

 

 

2.3ディレクトリとファイルを作成する
ディレクトリの下にモックsrcディレクトリを作成し、定義ファイルindex.jsモックマスターをし、設定ファイルをルーティングインターセプトを定義し、
/src/mock/index.js

共通モジュールとグローバル設定mockjsに導入された
」からインポートモックmockjs' //導入mockjs、NPMインストール
からインポートアクション『//パッケージアドレス要求@ / API /アクション』の導入

@グローバル設定:すべてのAJAXリクエストのタイムアウト、処理されたアナログ伝送ネットワーク設定
Mock.setupを({
//タイムアウト:400S @ 400がデータ要求に遅延
タイムアウト:200から400 //要求が200-400sを遅延させますデータ
})


個々のファイルに対して定義された2.4 * .vue XXX-mock.js
/src/mock/json/login-mock.js

注1:カスタムデータのJSON追加することができます
注2:さらにランダムなデータは、テンプレートmockjsを介して生成することができます

 


2.5 在index.js中导入xxx-mock.js,并添加拦截路由配置
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "post", {...})

 看页面打印结果

4. 后台首页AppMain.vue的创建
4.1 Container布局容器

4.2 TopNav


注1:使用组件之间通信,完成左侧菜单折叠

4.3 LeftAside

导入相应的vue和img

 

 

 

 

5. vue组件之间传递数据(总线)

根据vue组件之间传递数据实现element-ui的NavMenu菜单折叠、展开效果。

5.1 子组件往父组件传递数据(this.$emit)

 

 

TopNav -> Main

5.2 父组件往子组件传递数据(props)

 

 

Main -> LeftAside

 效果图

 

 

 

おすすめ

転載: www.cnblogs.com/xmf3628/p/11428908.html