【Element-UI】Mock.js，案例首页导航、左侧菜单

一、引言

二、Mock.js

1、什么是Mock.js

2、安装配置

2.1、安装

2.2、引入

3、Mock.js的使用

3.1、定义测试数据文件

3.2、mock拦截ajax请求

3.3、模拟测试

三、首页导航、左侧菜单

1、页面搭建

1.1、图标定义

1.2、AppMain.vue

1.3、LeftNav.vue

1.4、TopNav.vue

1.5、index.js

2、功能实现

2.1、AppMain.vue

2.2、LeftNav.vue

2.3、TopNav.vue

2.4、main.js

3、完整代码

3.1、AppMain.vue

3.2、LeftNav.vue

3.3、TopNav.vue

3.4、main.js

一、引言

在看这篇文章之前请先查看【Vue+Element-UI】实现登陆注册界面及axios之get、post请求登录功能实现、跨域问题的解决_无法自律的人的博客-CSDN博客这篇文章，这篇文章一些配置根据这一篇进行一个增加；如果你有一定的基础，可不用看。

二、Mock.js

1、什么是Mock.js

Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口，用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据，并且可以设置数据的类型、格式和规则，从而模拟真实的数据响应。Mock.js支持生成随机数据、拦截Ajax请求以返回模拟数据、支持RESTful API风格等功能，能够提高前端开发效率，并且减少对后端接口的依赖。

数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

更多内容请查看Mock.js 官网

2、安装配置

2.1、安装

在你的项目的路径CMD窗口下载Mock.js。
npm i mockjs -D
-D表示只在开发环境中使用

在我们的package.json里面可以看到我们下载的mock.js。

2.2、引入

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置。

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

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

prod.env.js

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

最后我们在main.js里面导入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock')
// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import router from './router'

// 新添加3----实例进行一个挂载
Vue.use(ElementUI)
Vue.config.productionTip = false

import axios from '@/api/http'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})