vue项目中如何引入mock并安装

参考文章：
1.https://blog.csdn.net/qq_36245035/article/details/10146907
2.https://blog.csdn.net/weixin_44524835/article/details/109244955?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-4.no_search_link
3.https://www.cnblogs.com/wangjiachen666/p/9547812.html
一般按照mock.js不重复写了
参照官网http://mockjs.com/
上代码
和main.js评级新建一个mock.js文件

在这里插入代码片
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
	let articles = [];
	for (let i = 0; i < 100; i++) {
		let newArticleObject = {
			title: Random.csentence(5, 30), //  Random.csentence( min, max )
			thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
			author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
			date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
		}
		articles.push(newArticleObject)
	}

	return {
		articles: articles
	}
}

// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'get', produceNewsData);

在api文件夹下新建一个api.js

import Axios from 'axios'

export async function getItemList () {
    let result = await Axios.get(`/news/index`).then(d => d.data);
    return result
}

在mian.js中引入mock.js文件

在这里插入代码片
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue'
import store from './store/index'
import 'ant-design-vue/dist/antd.css'
import VueQuillEditor from 'vue-quill-editor'
import './assets/css/core.css'
import './assets/css/snow.css'
import './assets/css/bubb.css'
import './assets/fonts/iconfont.css'
// import mockdata from './mock'
require('./mock') // 这里就是引入了mock.js文件
Vue.use(VueQuillEditor)

Vue.use(Antd)
Vue.config.productionTip = false

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

在组件内引入虚拟接口

import * as mockApi from "@/api/api.js";

写入调用虚拟接口方法的按钮

  <button @click="fasong">fasong</button>

最后在方法内调用这个虚拟接口

fasong() {
      // this.$http.get('/msg1').then(function (res) {
      //   console.log(res)
      // })
      // this.getMock();
      mockApi
        .getItemList()
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {});
    },

结果

Mock.random常见用法
https://blog.csdn.net/weCat_s/article/details/104415610