這篇文章主要介紹“Vue3+Vite項(xiàng)目怎么使用mockjs隨機(jī)模擬數(shù)據(jù)”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue3+Vite項(xiàng)目怎么使用mockjs隨機(jī)模擬數(shù)據(jù)”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),連江企業(yè)網(wǎng)站建設(shè),連江品牌網(wǎng)站建設(shè),網(wǎng)站定制,連江網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,連江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一、安裝mockjs

yarn add mockjs -S 或 npm i mockjs -D

二、安裝vite-plugin-mock

npm i vite-plugin-mock -D

三、在src/mock/source文件夾下創(chuàng)建user.ts

在index.vue中放入以下內(nèi)容：

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

export default [
  {
    url: '/api/getUserInfo', // 注意，這里只能是string格式
    method: 'get',
    response: () => {
      return {
        menusList: [{
          id: '1',
          title: '南辰',
          subMenuList: [
            {
              id: '11',
              title: '南',
              path: '/user/nan'
            },
            {
              id: '12',
              title: '小',
              path: '/user/xiao'
            },
            {
              id: '13',
              title: '辰',
              path: '/user/chen'
            }
          ]
        }, {
          id: '2',
          title: '希',
          subMenuList: [
            {
              id: '21',
              title: '玩游戲',
              path: '/user/play'
            }
          ]
        }]
      }
    }
  }
] as MockMethod[] // 這里其實(shí)就是定義數(shù)據(jù)格式的，不了解的同學(xué)可以參考typescript的官方文檔

四、開發(fā)環(huán)境配置

如果只是本地開發(fā)環(huán)境時(shí)使用，直接看下面即可步驟

在vite.config.ts進(jìn)行個(gè)人配置

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

export default defineConfig({
  plugins: [
    viteMockServe({
      mockPath: "./src/mock/source", // 解析剛剛user.ts的位置
      localEnabled: true // 是否開啟開發(fā)環(huán)境
    })
  ]
})

在頁面中引入

import { useRoute } from "vue-router"; //引入路由組件
import { onMounted, ref } from "vue";
import axios from "axios";
export default {
  setup() {
    const nc = ref("");
    onMounted(() => {
      axios.get("/api/getUserInfo").then((res) => {
        console.log(res);
        nc.value = res.data.menusList[0].title;
        console.log(nc.value);
      });
    });
    const $route = useRoute();
    const name = $route.query;
    return {
      name,
      nc,
    };
  },
};

打印效果如下：

如果想使用隨機(jī)數(shù)可以看接下來的步驟

如果只要隨機(jī)數(shù)則直接生成即可

想要隨機(jī)數(shù)在return中放入隨機(jī)條件即可。

如果想要用隨機(jī)數(shù)中的圖片就需要從mockjs中引入一個(gè)Random方法

在頁面上進(jìn)行循環(huán)：

<template>
  <div v-for="(item,index) in list" :key="index">
   <img :src="item.image" alt="">
   <p>{{item.id}}</p>
  </div>
</template>

<script lang='ts'>
import { useRoute } from "vue-router"; //引入路由組件
import { onMounted, ref } from "vue";
import axios from "axios";
export default {
  setup() {
    const list = ref("");
    onMounted(() => {
      axios.get("/api/getUserInfo").then((res) => {
        console.log(res);
        let lis = res.data.list;
        console.log(list.value =lis);
      });
    });

    return {
      nc,
      list,
    };
  },
};
</script>
<style scoped>
</style>

這里的Random.image()方法是從官網(wǎng)上拿下來用的

效果如下：

實(shí)現(xiàn)隨機(jī)不同的圖片＋字段

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/getUserInfo', // 注意，這里只能是string格式
    method: 'get',
    response: () => {
      return {
        'list|1-10': [{
          // 屬性 id 是一個(gè)自增數(shù)，起始值為 1，每次增 1
          'id|+1': 1,
        /*   image: Random.image() */
        "title": "@ctitle",
        "color":'@color',
        "image":"@image('','@color')"
        }],
      }
    }
  }
] as MockMethod[]

index.vue

import { useRoute } from "vue-router"; //引入路由組件
import { onMounted, ref } from "vue";
import axios from "axios";

export default {
  setup() {
    const list = ref("");
    onMounted(() => {
      axios.get("/api/getUserInfo").then((res) => {
        console.log(res);
        let lis = res.data.list;
        console.log(lis);
        console.log(list.value = lis);
      });
    });
    return {
      list,
    };
  },
};

效果如下：

關(guān)于“Vue3+Vite項(xiàng)目怎么使用mockjs隨機(jī)模擬數(shù)據(jù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。