Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù)

更新時間：2023年01月26日 13:02:15 作者：Nanchen_42

這篇文章主要介紹了Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù),需要的朋友可以參考下

在vite中使用mockjs進行模擬數(shù)據(jù)，需要借助新的依賴進行使用

一、安裝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

請?zhí)砑訄D片描述

在index.vue中放入以下內容：

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ù)據(jù)格式的，不了解的同學可以參考typescript的官方文檔

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

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

在vite.config.ts進行個人配置

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

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

在頁面中引入

<template>
  <div>{{name.name}}</div>
  <div>{{nc}}</div>
</template>

<script lang='ts'>
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,
    };
  },
};
</script>
<style scoped>
</style>

打印效果如下：
請?zhí)砑訄D片描述

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

如果只要隨機數(shù)則直接生成即可
請?zhí)砑訄D片描述
在這里插入圖片描述

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

如果想要用隨機數(shù)中的圖片就需要從mockjs中引入一個Random方法
在這里插入圖片描述
在頁面上進行循環(huán)：

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

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

    return {
      nc,
      list,
    };
  },
};
&lt;/script&gt;
&lt;style scoped&gt;
&lt;/style&gt;

這里的Random.image()方法是從官網上拿下來用的
在這里插入圖片描述
效果如下：

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

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

index.vue

<template>
<div v-for="(item,index) in list" :key="index">
 <img :src="item.image" alt="">
 {{item.title}}
 </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(lis);
        console.log(list.value = lis);
      });
    });
    return {
      list,
    };
  },
};
</script>
<style scoped>
</style>

在這里插入圖片描述
效果如下：

到此這篇關于Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù)的文章就介紹到這了,更多相關Vue3+Vite項目使用mockjs模擬數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue報錯Component?name"Home"should?always?be?mult
這篇文章主要介紹了Vue報錯Component?name"Home"should?always?be?multi問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進度功能
這篇文章主要介紹了Vue框架+Element-ui(el-upload組件)使用http-request方法上傳文件并顯示文件上傳進度功能,本通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
2024-08-08
Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項
這篇文章主要介紹了Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
基于axios請求封裝的vue應用實例代碼
這篇文章主要給大家介紹了基于axios請求封裝的vue應用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-05-05
詳解如何在Vue項目中實現(xiàn)累加動畫
這篇文章主要為大家詳細介紹了如何在你的Vue項目中實現(xiàn)累加動畫，文中的示例代碼簡潔易懂，具有一定的參考價值，感興趣的小伙伴可以了解一下
2023-06-06
electron-builder打包vue2項目問題總結
這篇文章主要介紹了electron-builder打包vue2項目問題總結,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
2024-08-08
Vue3.2.x中的小技巧及注意事項總結
Vue是一套用于構建用戶界面的漸進式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關于Vue3.2.x中的小技巧及注意事項的相關資料,需要的朋友可以參考下
2022-04-04
Vue.js中的computed工作原理
這篇文章，我們通過實現(xiàn)一個簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學習吧
2018-03-03
手寫可拖動穿梭框組件CustormTransfer vue實現(xiàn)示例
這篇文章主要為大家介紹了手寫可拖動穿梭框組件CustormTransfer vue實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
vue-cli 環(huán)境變量 process.env的使用及說明
這篇文章主要介紹了vue-cli 環(huán)境變量 process.env的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12