vue3前端項(xiàng)目開發(fā),具備純天然的防止爬蟲采集的特征！眾所周知，網(wǎng)絡(luò)爬蟲可以在網(wǎng)上爬取到一些數(shù)據(jù)，很多公司，為了自己公司的數(shù)據(jù)安全， 尤其是web端項(xiàng)目，不希望被爬蟲采集。那么，您可以使用vue技術(shù)開發(fā)web前端內(nèi)容。下面給大家展示的是，黑馬程序員的前端項(xiàng)目之一，小兔鮮的前端web項(xiàng)目內(nèi)容。

如圖，我在自己本地借助于vite插件打開了這個(gè)項(xiàng)目，在瀏覽器內(nèi)瀏覽到了前端的頁面。這個(gè)是默認(rèn)的首頁面截圖。

<script setup></script>
<template><!--一級(jí)路由的出口--><RouterView />
</template>
<style scoped lang="scss"></style>

?App.vue作為入口文件，里面可以看見就寫了一個(gè)路由標(biāo)簽。我們使用到了路由插件，router.，在里面配置好了首頁的模版路徑。

import { createRouter, createWebHistory } from 'vue-router'
//createRouter：創(chuàng)建router的實(shí)例對(duì)象
//createWebHistory:創(chuàng)建history模式的路由
import Login from '@/views/login/index.vue'
import Layout from '@/views/layout/index.vue'
import Home from '@/views/home/index.vue'
import Categroy from '@/views/category/index.vue'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [//path和component對(duì)應(yīng)關(guān)系{path:'/',component:Layout,children:[{//默認(rèn)不寫內(nèi)容，就是會(huì)跟著一起渲染的path:'',component:Home},{path:'category',component:Categroy}]},{path:'/login',component:Login}]
})export default router

如圖，里面可以看見“/”，對(duì)應(yīng)的組件是Layout組件。

這里需要給大家提個(gè)醒，里面還有子組件呢，而且，重點(diǎn)來了，子組件里面有一個(gè)是沒有寫內(nèi)容的，我加了注釋，不寫內(nèi)容，默認(rèn)就會(huì)跟著啟動(dòng)渲染出來的。它對(duì)應(yīng)的組件是home。

跑題了，回歸到數(shù)據(jù)安全的層面，我們打開查看源代碼，可以看見，里面其實(shí)看不見具體的業(yè)務(wù)數(shù)據(jù)了。因?yàn)楸籿ue技術(shù)框架封裝起來了。

這個(gè)就可以避免一些爬蟲采集器的數(shù)據(jù)抓取了。純天然，vue技術(shù)自帶反爬蟲的特征。

?

如圖，黑馬程序員提供了他們的官方業(yè)務(wù)數(shù)據(jù)接口調(diào)用。我這個(gè)是其中一個(gè)接口調(diào)用。

大家想自學(xué)vue項(xiàng)目開發(fā)，可以考慮一下黑馬程序員的課程，講的還是比較詳細(xì)的。適合新手練習(xí)項(xiàng)目。入門項(xiàng)目。?