Npcink Blog
切换菜单

mockjs 使用 - Vite

使用 mock.js 生成随机数据并调用

最后更新于
本页目录4 节

环境配置

新建项目

Terminal window
npm create vite@latest my-vue-mock -- --template vue

安装 mockjs

Terminal window
npm i  mockjs -S

开始使用（本地版）

在 App.vue 文件中添加以下代码

import Mock from 'mockjs'
const testMath = Mock.mock({
  'list|1-10':9
})

代码的作用是生成一个随机的数

然后在 template 标签中添加以下代码调用

<h2>{{testMath}}</h2>

App.vue 文件的完整代码如下

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Mock from 'mockjs'
const testMath = Mock.mock({
  'list|1-10':9
})
</script>


<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
  <h2>{{testMath}}</h2>
</template>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

运行以下命令，即可看到效果

Terminal window
npm run dev

接口版（推荐）

以为接口版更贴近实际开发过程，因此推荐

若您需要通过接口获取数据，您可能需要安装下面这个

安装 vite-plugin-mock（开发环境安装）

Terminal window
npm i vite-plugin-mock -D

您可能还要安装 axios，来使用接口（生产环境安装）

Terminal window
npm install axios -S

我们在 vit.config.js 文件中添加以下代码

import { viteMockServe } from 'vite-plugin-mock'


viteMockServe({
      mockPath: "./src/mock/",
    }),

监控指定文件夹下的 index.js 文件

vit.config.js 文件完整代码如下：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteMockServe } from "vite-plugin-mock";


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: "./src/mock/",
    }),
  ],
});

我们在 src 目录下，新建 mock 文件夹，新增 index.js 文件，在该文件中写如下代码

export default [
  //简单的演示
  {
    url: "/api/get", //接口地址
    method: "get", //请求方式
    timeout: 500, //指定被拦截的 Ajax 请求的响应时间，单位是毫秒。值可以是正整数
    response: () => {
      return {
        code: 0,
        message: "获取数据成功",
        data: {
          name: "@cname",
        },
      };
    },
  },
];

然后，我们可以 components 文件夹下新建文件 axiosMock.vue，并填入以下代码调用

<script setup>
import axios from 'axios'// 引入axios
import { ref, onMounted } from 'vue'//引入我们需要的方法
const axiosData = ref("")


onMounted(() => {


    //简单的例子


    axios.get('./api/get')
        .then((res) => {
            //console.log(res.data)
            axiosData.value = res.data.data
        })


})


</script>
<template>
    <h2>Axios调用Mock生成的数据</h2>
    <h4>简单示例</h4>
    随机生成名字：{{axiosData.name}}




</template>

然后在 App.vue 中添加以下代码引入并调用

//Axios调用Mock生成数据
import AxiosMock from './components/axiosMock.vue'
<AxiosMock />

App.vue 文件完整代码如下

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup


//Axios调用Mock生成数据
import AxiosMock from './components/axiosMock.vue'


</script>


<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>




  <AxiosImages />


</template>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}


.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}


.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

参考文档