vue3前端项目开发,具备纯天然的防止爬虫采集的特征！众所周知，网络爬虫可以在网上爬取到一些数据，很多公司，为了自己公司的数据安全， 尤其是web端项目，不希望被爬虫采集。那么，您可以使用vue技术开发web前端内容。下面给大家展示的是，黑马程序员的前端项目之一，小兔鲜的前端web项目内容。

---

如图，我在自己本地借助于vite插件打开了这个项目，在浏览器内浏览到了前端的页面。这个是默认的首页面截图。

<script setup>


</script>
<template>
  <!--一级路由的出口-->
  <RouterView />
</template>
<style scoped lang="scss">

</style>

 App.vue作为入口文件，里面可以看见就写了一个路由标签。我们使用到了路由插件，router.，在里面配置好了首页的模版路径。

import { createRouter, createWebHistory } from 'vue-router'
//createRouter：创建router的实例对象
//createWebHistory:创建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对应关系
    {
      path:'/',
      component:Layout,
      children:[
        {
          //默认不写内容，就是会跟着一起渲染的
          path:'',
          component:Home
        },
        {
          path:'category',
          component:Categroy
        }
      ]
    },
    {
      path:'/login',
      component:Login
    }
  ]
})

export default router

如图，里面可以看见“/”，对应的组件是Layout组件。

这里需要给大家提个醒，里面还有子组件呢，而且，重点来了，子组件里面有一个是没有写内容的，我加了注释，不写内容，默认就会跟着启动渲染出来的。它对应的组件是home。

---

跑题了，回归到数据安全的层面，我们打开查看源代码，可以看见，里面其实看不见具体的业务数据了。因为被vue技术框架封装起来了。

这个就可以避免一些爬虫采集器的数据抓取了。纯天然，vue技术自带反爬虫的特征。

 

如图，黑马程序员提供了他们的官方业务数据接口调用。我这个是其中一个接口调用。

大家想自学vue项目开发，可以考虑一下黑马程序员的课程，讲的还是比较详细的。适合新手练习项目。入门项目。