Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建過程

更新時間：2023年09月27日 10:32:21 作者：〔Lisa〕

Mock.js是一個模擬數(shù)據(jù)的生成器，用來幫助前端調(diào)試開發(fā)、進(jìn)行前后端的原型分離以及用來提高自動化測試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下

前言：

因?yàn)槭褂肰ue開發(fā)，組件寫的太多，組件與組件之間的傳遞數(shù)據(jù)復(fù)雜，所以要用到Mock和Bus事件

一，關(guān)于Mock

1.1.什么是Mock.js

Mock.js是一個模擬數(shù)據(jù)的生成器，用來幫助前端調(diào)試開發(fā)、進(jìn)行前后端的原型分離以及用來提高自動化測試效率。

總的來說：Mock.js就是協(xié)同我們開發(fā)項(xiàng)目的。

mock的官網(wǎng)

https://link.csdn.net/?target=http%3A%2F%2Fmockjs.com%2F

Mock的作用：

1. 獨(dú)立開發(fā)：Mock可以幫助前端開發(fā)人員在后端接口未完成或不可用的情況下，獨(dú)立進(jìn)行前端開發(fā)。通過使用Mock.js生成模擬數(shù)據(jù)，前端開發(fā)人員可以在沒有后端接口的情況下完成頁面的開發(fā)和調(diào)試。

2. 接口聯(lián)調(diào)：Mock可以用于前后端接口聯(lián)調(diào)。在后端接口未完成或不可用的情況下，前端開發(fā)人員可以使用Mock.js模擬后端接口返回的數(shù)據(jù)，進(jìn)行接口聯(lián)調(diào)和測試。

3. 單元測試：Mock可以用于前端代碼的單元測試。通過使用Mock.js生成模擬數(shù)據(jù)，可以模擬不同的測試場景，對前端代碼進(jìn)行單元測試，提高代碼質(zhì)量和穩(wěn)定性。

4. 數(shù)據(jù)展示：Mock可以用于前端頁面的數(shù)據(jù)展示。在開發(fā)過程中，可以使用Mock.js生成模擬數(shù)據(jù)，填充頁面，以便進(jìn)行樣式和布局的調(diào)試。

具體思路：

1.導(dǎo)入依賴

2.環(huán)境配置

3.創(chuàng)造模板

4.綁定接口

1.2.安裝與配置

1.2.1通過cmd下載指定的插件

npm i mockjs -D

上篇我已經(jīng)介紹了關(guān)于S，G，I 的區(qū)別了，不熟悉的可以查看我的上一篇博客。

-D表示只在開發(fā)環(huán)境中使用

例如：我在開發(fā)中遇到的問題：

解決方法：再重新下載一波我們Mock.js依賴。

判斷是否下載好了！

1.2.2.引入mock.js

在引入之前，我們先來回顧之前的SPA項(xiàng)目的目錄結(jié)構(gòu)。

為了只在開發(fā)環(huán)境使用mock，而打包到生產(chǎn)環(huán)境時自動不使用mock，我們可以在config目錄中的 dev.env.js 和 prod.env.js 做一個配置，如下：

dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
    MOCK: 'true'
})

prod.env.js

module.exports = {
  NODE_ENV: '"production"',
    MOCK: 'false'
}

main.js

//開發(fā)環(huán)境下才會引入mockjs
process.env.MOCK && require('@/mock')

引入的位置

1.3.mockjs使用

回顧我們前面講的知識：Json格式的數(shù)據(jù)傳遞給前端：

{code：1，msg: '登錄成功'} {code：0，msg: '登錄失敗'}

1.3.1所以這里我們創(chuàng)建 `src/mock/json` 目錄，定義登錄測試數(shù)據(jù)文件login-mock.js：

// const loginInfo = {
// 	code: -1,
// 	message: '密碼錯誤'
// }
//使用mockjs的模板生成隨機(jī)數(shù)據(jù)
const loginInfo = {
	'code|-1-0': 0,
	'message|3-10': 'msg'
}
export default loginInfo;

1.3.2在src/mock目錄下創(chuàng)建index.js，定義攔截路由配置：

import Mock from 'mockjs' 		  //引入mockjs，npm已安裝
import action from '@/api/action' //引入封裝的請求地址
//全局設(shè)置：設(shè)置所有ajax請求的超時時間，模擬網(wǎng)絡(luò)傳輸耗時
Mock.setup({
	// timeout: 400    //延時400s請求到數(shù)據(jù)
	timeout: 200 - 400 //延時200-400s請求到數(shù)據(jù)
})
//引入登錄的測試數(shù)據(jù)，并添加到mockjs
import loginInfo from '@/mock/json/login-mock.js'
//數(shù)據(jù)請求地址
let url = action.getFullPath('SYSTEM_USER_DOLOGIN');
//使用mockjs模擬發(fā)送請求
// Mock.mock(url,'post',loginInfo);
Mock.mock(url,/post|get/i,loginInfo);
/* Mock.mock(url, /post|get/i, (options) => {
	// 最佳實(shí)踐，
	console.debug(url, options);
	return Mock.mock(loginInfo);
}); */

1.3.3.數(shù)據(jù)模板定義規(guī)則

請在使用的Vue組件中，先導(dǎo)入Mock模塊

生成隨機(jī)id值

使用Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』，書寫格式為 @占位符(參數(shù) [, 參數(shù)])

let uid1 = Mock.Random.guid();
//使用占位符的方式
let uid2 = Mock.mock("@guid");
console.log(uid1);
console.log(uid2);

string

let obj1 = Mock.mock({
  'star|1-5':"★",//生成指定范圍長度的字符串
  info:'靜態(tài)的字符串',//靜態(tài)字符串
  name:'@cname'//使用規(guī)定占位符@cname，隨機(jī)生成中國人的名字
})
console.log(obj1);

number 自增

+1 是指，在id的起始值每次調(diào)用+1

// +1 是指，在id的起始值每次調(diào)用+1
let temp = {
    "id|+1":1000001
}
console.log(Mock.mock(temp)); // 1000001
console.log(Mock.mock(temp)); // 1000002
console.log(Mock.mock(temp)); // 1000003
console.log(Mock.mock(temp)); // 1000004
console.log(Mock.mock(temp)); // 1000005
console.log(Mock.mock(temp)); // 1000006

number隨機(jī)生成

小數(shù)生成 |min-max.dmin(小數(shù)最小位數(shù))-dmax(小數(shù)最大位數(shù))

let obj2 = Mock.mock({
    'age|1-100':0,//隨機(jī)生成0-100整數(shù)
    'price|1-100.1-4':0,//隨機(jī)生成整數(shù)部分1-100，小數(shù)位數(shù)1-4位
    'num|.2-4':0,//整數(shù)部分省略不寫，默認(rèn)是0(js的默認(rèn)規(guī)則)
    'num2|100.3-3':0//整數(shù)部分保持100不變，小數(shù)位數(shù)恒定3位數(shù)，小數(shù)值隨機(jī)生成
})
console.log(obj2);

boolean值

let flag = {
    'flag1|0':true, //模板規(guī)則：0數(shù)值是0時，表示布爾值恒定是false
    'flag2|1':false,//值位>=1時，boolean隨機(jī)取值
    "flag3|1-2":true
}
console.log(Mock.mock(flag));

城市隨機(jī)取值

let city = Mock.mock({
    "city1|2":{//數(shù)字2表示隨機(jī)取2個值
        addr1:'@city',//占位符@city表示隨機(jī)生成城市
        addr2:'@city',//占位符@city表示隨機(jī)生成城市
        addr3:'@city',//占位符@city表示隨機(jī)生成城市
        addr4:'@city',//占位符@city表示隨機(jī)生成城市
    },
    "city2|1-3":{//數(shù)字1-3表示隨機(jī)取1-3個值
        addr1:'@city',//占位符@city表示隨機(jī)生成城市
        addr2:'@city',//占位符@city表示隨機(jī)生成城市
        addr3:'@city',//占位符@city表示隨機(jī)生成城市
        addr4:'@city',//占位符@city表示隨機(jī)生成城市
    }
})
console.log(city);

枚舉取值,從數(shù)組中隨機(jī)取值

let gender = Mock.mock({
    'sex|1':['男','女','不知道'],//數(shù)字1表示隨機(jī)取數(shù)組中的一個值
    'sex2|+1':['男','女','不知道']//+1表示循環(huán)一次取數(shù)組中的值
})
console.log(gender);

正則表達(dá)式規(guī)則

let obj7 = Mock.mock({
    user:{
        name:'@cname',
    },
    tel:/1[0-9]{10}/,
    //正則表達(dá)式可以使用插件
    email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    //函數(shù)表達(dá)式
    info:function(){
        //注意：這里的this指向是數(shù)據(jù)模板對象，所以可以在函數(shù)表達(dá)式里使用this來獲取已有值；
        return `我的手機(jī)號碼是:${this.tel},我的郵箱是:${this.email},我的身份證號碼是:${this.cardId}`
    },
    // (8)路徑規(guī)則中： @表示啟動關(guān)鍵字(注意：@前面不能有除了空格的任何其他字符)
    //          ==>   / 表示在模板數(shù)據(jù)中的層級關(guān)系，上下級
    message:"我的名字是: @/user/name ,我的手機(jī)號碼是: @/tel,我的郵箱是: @/email,我的身份證號碼是: @/cardId"
})
console.log(obj7);

日期生成

let timer = Mock.mock({
    day1:'@date',// @date占位符表示隨機(jī)生成mock默認(rèn)格式的年月日
    day2:'@date("yyyy年MM月dd日")',//@date()可以傳參，自定義時間格式,
    time1:'@time',//@time占位符可以隨機(jī)生成mock格式的時分秒
    time2:'@time("HH時mm分ss秒SS毫秒")',//同樣可以在@time()中傳參數(shù)自定義格式
    daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的時間
    nowTime:'@now'
})
console.log(timer);

圖片生成

生成的是帶參數(shù)的圖片地址，可以根據(jù)地址獲取圖片

let imgs = Mock.mock({
    img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
    img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
    img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
    // mock占位符調(diào)用時，需要傳遞參數(shù)，參數(shù)也可以是占位符
    img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
    //可以使用隨機(jī)生成圖片的網(wǎng)址，但是注意，統(tǒng)一網(wǎng)址的請求圖片地址時，如果不加參數(shù)，那么瀏覽器默認(rèn)地址一樣的會使用瀏覽器的緩存，那么所請求的圖片只有一種；一般加一個時間戳作為參數(shù)，保持參數(shù)的唯一，圖片可以請求到不同的值
    img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
});
console.log(imgs);

1.4效果展示：成功的

二，關(guān)于Vue中的總線，搭建我們的首頁導(dǎo)航欄與左側(cè)菜單搭建

目的：在開發(fā)中為了方便我們的組件與組件之間的通信傳遞。以今天的舉例來說就是當(dāng)我們點(diǎn)擊左側(cè)的拉開與收起按鈕時減少我們的代碼量！?。?/p>

2.1這里我們導(dǎo)入三個vue

AppMain.vue

<template>
	<el-container class="main-container">
		<el-aside v-bind:class="asideClass">
			<LeftNav></LeftNav>
		</el-aside>
		<el-container>
			<el-header class="main-header">
				<TopNav></TopNav>
			</el-header>
			<el-main class="main-center">Main</el-main>
		</el-container>
	</el-container>
</template>
<script>
	// 導(dǎo)入組件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'
	// 導(dǎo)出模塊
	export default {
	};
</script>
<style scoped>
	.main-container {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}
	.main-aside-collapsed {
		/* 在CSS中，通過對某一樣式聲明! important ，可以更改默認(rèn)的CSS樣式優(yōu)先級規(guī)則，使該條樣式屬性聲明具有最高優(yōu)先級 */
		width: 64px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}
	.main-aside {
		width: 240px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}
	.main-header,
	.main-center {
		padding: 0px;
		border-left: 2px solid #333;
	}
</style>

LeftNav.vue

<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" :collapse-transition="bb">
		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span>導(dǎo)航一</span>
			</template>
			<el-menu-item-group>
				<template slot="title">分組一</template>
				<el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
				<el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
			</el-menu-item-group>
			<el-menu-item-group title="分組2">
				<el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
			</el-menu-item-group>
			<el-submenu index="1-4">
				<template slot="title">選項(xiàng)4</template>
				<el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
			</el-submenu>
		</el-submenu>
		<el-menu-item index="2">
			<i class="el-icon-menu"></i>
			<span slot="title">導(dǎo)航二</span>
		</el-menu-item>
		<el-menu-item index="3" disabled>
			<i class="el-icon-document"></i>
			<span slot="title">導(dǎo)航三</span>
		</el-menu-item>
		<el-menu-item index="4">
			<i class="el-icon-setting"></i>
			<span slot="title">導(dǎo)航四</span>
		</el-menu-item>
	</el-menu>
</template>
<script>
	export default {
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}
	.el-menu-item-group__title {
		padding: 0px;
	}
	.el-menu-bg {
		background-color: #1f2d3d !important;
	}
	.el-menu {
		border: none;
	}
	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}
	.logoimg {
		height: 40px;
	}
</style>

TopNav.vue

<template>
	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
	 text-color="#fff" active-text-color="#ffd04b">
		<el-menu-item index="1">處理中心</el-menu-item>
		<el-submenu index="2">
			<template slot="title">我的工作臺</template>
			<el-menu-item index="2-1">選項(xiàng)1</el-menu-item>
			<el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
			<el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
			<el-submenu index="2-4">
				<template slot="title">選項(xiàng)4</template>
				<el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
				<el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
				<el-menu-item index="2-4-3">選項(xiàng)3</el-menu-item>
			</el-submenu>
		</el-submenu>
		<el-menu-item index="3" disabled>消息中心</el-menu-item>
		<el-menu-item index="4"><a  target="_blank">訂單管理</a></el-menu-item>
	</el-menu> -->
	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
		<el-button class="buttonimg">
			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
		</el-button>
		<el-submenu index="2" class="submenu">
			<template slot="title">超級管理員</template>
			<el-menu-item index="2-1">設(shè)置</el-menu-item>
			<el-menu-item index="2-2">個人中心</el-menu-item>
			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
		</el-submenu>
	</el-menu>
</template>
<script>
	export default {
	}
</script>
<style scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
	}
	.submenu {
		float: right;
	}
	.buttonimg {
		height: 60px;
		background-color: transparent;
		border: none;
	}
	.showimg {
		width: 26px;
		height: 26px;
		position: absolute;
		top: 17px;
		left: 17px;
	}
	.showimg:active {
		border: none;
	}
</style>

2.2導(dǎo)入我們的圖片

（圖片資源私信我，給你安排！?。。?/p>

2.3在路由中配置我們的路由關(guān)系

import AppMain.vue from '@/components/AppMain.vue'
import LeftNav.vue from '@/components/LeftNav.vue'
import TopNav.vue from '@/components/TopNav.vue'

2.4導(dǎo)出模塊

AppMain.vue

   export default {
        //父建綁定子鍵
        TopNav,LeftNav
        data() {
            return{
                asideClass:'main-aside'
            }
        }
    };

TopNav.vue

<script>
    export default {
        data() {
            return{
                collapsed:false, //折疊
                // imgshow:'/assets/img/show.png',//有問題
                imgshow:require('@/assets/img/show.png'),
                imgsq:require('@/assets/img/sq.png')
            }
        }
    }
</script>

LeftNav.vue

<script>
	export default {
		data() {
			return{
				collapsed:false //折疊
			}
		}
	}
</script>

圖片顯示就有問題：因?yàn)楦袷讲粚Γ。。?/strong>

Vue

Mock.js

導(dǎo)航欄

左側(cè)菜單

相關(guān)文章

vue2.x+webpack快速搭建前端項(xiàng)目框架詳解
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項(xiàng)目框架的詳細(xì)操作方法，需要的跟著學(xué)習(xí)下吧。
2017-11-11

vue-seamless-scroll 實(shí)現(xiàn)簡單自動無縫滾動且添加對應(yīng)點(diǎn)擊事件的簡單整理
vue-seamless-scroll是一個基于Vue.js的簡單無縫滾動組件, 基于requestAnimationFrame實(shí)現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動，單步滾動，及支持水平方向的手動切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實(shí)現(xiàn)自動無縫滾動的效果，并對應(yīng)添加點(diǎn)擊事件
2023-01-01

解決vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)問題
這篇文章主要介紹了vue 按鈕多次點(diǎn)擊重復(fù)提交數(shù)據(jù)的問題,本文通過實(shí)例結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2018-05-05

很棒的vue彈窗組件
這篇文章主要為大家詳細(xì)介紹了vue彈窗組件的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05

優(yōu)化Vue template中大量條件選擇v-if的方案分享
本文我們將給大家詳細(xì)的講解一下如何優(yōu)化Vue template 中的大量條件選擇v-if,文中通過代碼示例介紹的非常詳細(xì),有詳細(xì)的優(yōu)化方案,感興趣的朋友可以參考閱讀下
2023-07-07

vue實(shí)現(xiàn)購物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購物車結(jié)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06

解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03

uni-appx和uni-app的區(qū)別以及該如何選擇詳解
Uniapp?X是DCloud推出的下一代跨平臺應(yīng)用開發(fā)引擎,基于?TypeScript?和原生渲染技術(shù),性能顯著提升,接近原生應(yīng)用,這篇文章主要介紹了uni-appx和uni-app的區(qū)別以及該如何選擇的相關(guān)資料,需要的朋友可以參考下
2025-09-09

Vue?計算屬性之姓名案例的三種實(shí)現(xiàn)方法
這篇文章主要介紹了Vue?計算屬性之姓名案例的三種實(shí)現(xiàn)方法，計算屬性實(shí)現(xiàn)、methods實(shí)現(xiàn)和插值語法實(shí)現(xiàn)，下面文章具體介紹，需要的小伙伴可以參考一下
2022-05-05

vue中的適配px2rem示例代碼
這篇文章主要給大家介紹了關(guān)于vue中適配px2rem的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11

最新評論

大家感興趣的內(nèi)容

1vue引用js文件的多種方式(推薦)
2vue跳轉(zhuǎn)頁面的幾種方法(推薦)
3詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
4vue項(xiàng)目刷新當(dāng)前頁面的三種方法
5vue之父子組件間通信實(shí)例講解(props、$ref、$em
6Vue props用法詳解(小結(jié))
7vue.js中created方法作用
8element-ui中select組件綁定值改變,觸發(fā)cha
9Vue.js 中的 v-show 指令及用法詳解
10簡單理解vue中Props屬性

最近更新的內(nèi)容

Vue.js directive自定義指令詳解
vuex頁面刷新數(shù)據(jù)丟失解決方法詳解
Vue項(xiàng)目中CSS?Modules和Scoped?CSS的介紹與區(qū)別
vue通信方式EventBus的實(shí)現(xiàn)代碼詳解
vue項(xiàng)目記錄鎖定和解鎖功能實(shí)現(xiàn)
深入探討Vue3中Composition API的使用方法
vue 實(shí)現(xiàn)圖片懶加載功能
vue-video-player 解決微信自動全屏播放問題(橫豎屏導(dǎo)致樣式錯
vue中的el-button樣式自定義方式
Vue.use()的作用及原理解析

常用在線小工具

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue?Mock.js介紹和使用與首頁導(dǎo)航欄左側(cè)菜單搭建過程

目錄

前言：

一，關(guān)于Mock

1.1.什么是Mock.js

1.2.安裝與配置

1.2.1通過cmd下載指定的插件

1.2.2.引入mock.js

1.3.mockjs使用

1.3.1所以這里我們創(chuàng)建 src/mock/json 目錄，定義登錄測試數(shù)據(jù)文件login-mock.js：

1.3.2在src/mock目錄下創(chuàng)建index.js，定義攔截路由配置：

1.3.3.數(shù)據(jù)模板定義規(guī)則

1.4效果展示：成功的

二，關(guān)于Vue中的總線，搭建我們的首頁導(dǎo)航欄與左側(cè)菜單搭建

2.1這里我們導(dǎo)入三個vue

2.2導(dǎo)入我們的圖片

2.3在路由中配置我們的路由關(guān)系

2.4導(dǎo)出模塊

2.5退出

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一，關(guān)于Mock

1.3.1所以這里我們創(chuàng)建 `src/mock/json` 目錄，定義登錄測試數(shù)據(jù)文件login-mock.js：

1.3.2在src/mock目錄下創(chuàng)建index.js，定義攔截路由配置：

二，關(guān)于Vue中的總線，搭建我們的首頁導(dǎo)航欄與左側(cè)菜單搭建