前端框架搭建完成

node_modules/.cache/eslint/7dc60d80.json

@@ -1 +1 @@
-[{"D:\\vue\\demo\\src\\main.js":"1","D:\\vue\\demo\\src\\App.vue":"2","D:\\vue\\demo\\src\\router\\index.js":"3","D:\\vue\\demo\\src\\views\\Main.vue":"4","D:\\vue\\demo\\src\\views\\shequ\\index.vue":"5","D:\\vue\\demo\\src\\components\\header.vue":"6","D:\\vue\\demo\\src\\components\\background.vue":"7"},{"size":250,"mtime":1730287261299,"results":"8","hashOfConfig":"9"},{"size":87,"mtime":1730287173219,"results":"10","hashOfConfig":"9"},{"size":418,"mtime":1730209531800,"results":"11","hashOfConfig":"9"},{"size":698,"mtime":1731057371238,"results":"12","hashOfConfig":"9"},{"size":554,"mtime":1730287287478,"results":"13","hashOfConfig":"9"},{"size":1628,"mtime":1730475097435,"results":"14","hashOfConfig":"9"},{"size":910,"mtime":1731055926442,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"13s4xo0",{"filePath":"19","messages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\vue\\demo\\src\\main.js",[],[],"D:\\vue\\demo\\src\\App.vue",[],[],"D:\\vue\\demo\\src\\router\\index.js",[],"D:\\vue\\demo\\src\\views\\Main.vue",[],"D:\\vue\\demo\\src\\views\\shequ\\index.vue",[],"D:\\vue\\demo\\src\\components\\header.vue",[],"D:\\vue\\demo\\src\\components\\background.vue",[]]
+[{"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\main.js":"1","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\App.vue":"2","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\router\\index.js":"3","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\Main.vue":"4","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\header.vue":"5","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\background.vue":"6","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\recommend\\index.vue":"7","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\chat\\chat.vue":"8","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\community\\trends.vue":"9","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\space\\space.vue":"10","D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\login\\login.vue":"11"},{"size":261,"mtime":1731506523733,"results":"12","hashOfConfig":"13"},{"size":97,"mtime":1731506523731,"results":"14","hashOfConfig":"13"},{"size":1052,"mtime":1731513557777,"results":"15","hashOfConfig":"13"},{"size":753,"mtime":1731509041050,"results":"16","hashOfConfig":"13"},{"size":2627,"mtime":1731513642386,"results":"17","hashOfConfig":"13"},{"size":910,"mtime":1731506523732,"results":"18","hashOfConfig":"13"},{"size":161,"mtime":1731508571798,"results":"19","hashOfConfig":"13"},{"size":156,"mtime":1731511731213,"results":"20","hashOfConfig":"13"},{"size":155,"mtime":1731512433247,"results":"21","hashOfConfig":"13"},{"size":157,"mtime":1731512507547,"results":"22","hashOfConfig":"13"},{"size":151,"mtime":1731513510444,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"10795if",{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\main.js",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\App.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\router\\index.js",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\Main.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\header.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\components\\background.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\recommend\\index.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\chat\\chat.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\community\\trends.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\space\\space.vue",[],"D:\\我的桌面\\恋爱森林\\dazuoye\\src\\views\\login\\login.vue",[]]

src/components/header.vue

@@ -4,7 +4,7 @@
       class="el-menu-demo"
       mode="horizontal"
       @select="handleSelect"
-      background-color="#FFFFFF"
+      background-color="#ffffff"
       text-color="#000000"
       active-text-color="#FEB2D7"
     >
@@ -13,7 +13,7 @@
     </div>
       <el-menu-item index="1">智能推荐</el-menu-item>
       <el-sub-menu index="2">
-        <template #title>社区互动</template>
+        <template #title>{{communityName}}</template>
         <el-menu-item index="2-1">私信聊天</el-menu-item>
         <el-menu-item index="2-2">社区动态</el-menu-item>
       </el-sub-menu>
@@ -26,33 +26,64 @@
     <div class="h-6" />
     
   </template>
-  <style>
-    .el-menu-demo {
-      justify-content: space-between; /* 平铺菜单项 */
-      font-weight: bold; /* 加粗字体 */
 
+  <script setup>
+  import { useRouter } from 'vue-router'
+  import { ref,onMounted } from 'vue'
+  const router = useRouter()
+  const activeIndex = ref('1') // 设置默认选中的索引为 '1'
+  const communityName = ref('社区互动')
+  const handleSelect = (indexPath) => {
+    if (indexPath === '1') {
+      router.push('/main/recommend') // 当选择“智能推荐”时，导航到子路由
     } 
-
+    else if(indexPath === '2-1') {
-    .logo img,
+      router.push('/main/chat')
-    .tu img {
+      communityName.value = '私信聊天'
-      height: 50px; /* 根据需要调整高度 */
-      width: auto;  /* 自适应宽度 */
-      margin-right: 10px; /* 与菜单项的间距 */
     }
-    .el-menu-item {
+    else if(indexPath === '2-2') {
-        line-height: 70px; /* 设置菜单项的行高，和菜单高度一致 */
+      router.push('/main/community')
-        font-weight: bold; /* 加粗字体 */
+      communityName.value = '社区动态'
-      }
+    }
-    </style>
+    else if(indexPath === '4') {
-
+      router.push('/main/space')
-<script setup>
+    }
-    
+  }
-    const handleSelect = () =>{}
+  onMounted(() => {
+    if (window.location.pathname === '/') {
+      router.push('/main/recommend')
+    }
+  })
 </script>
 <script>
-    export default 
+  export default 
-    {
+  {
-      name: 'HeaderComponent', // 添加组件名称
+    name: 'HeaderComponent', // 添加组件名称
-      // 其他组件选项
+    // 其他组件选项
-    }
+  }
-    </script>
+</script>
+
+<style>
+.el-menu-demo {
+  justify-content: space-between; /* 平铺菜单项 */
+  font-weight: bold; /* 加粗字体 */
+  
+}
+/* 取消悬停和选中时的背景色 */
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
+.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
+.el-menu--horizontal > .el-menu-item.is-active {
+  background-color: transparent !important;
+}
+.logo img,
+.tu img {
+  height: 50px; /* 根据需要调整高度 */
+  width: auto;  /* 自适应宽度 */
+  margin-right: 10px; /* 与菜单项的间距 */
+}
+.el-menu-item {
+    line-height: 70px; /* 设置菜单项的行高，和菜单高度一致 */
+    font-weight: bold; /* 加粗字体 */
+  }
+</style>
+

src/router/index.js

@@ -1,25 +1,49 @@
-import layout from '../views/Main.vue'
+import login from '@/views/login/login.vue'
-import Login from '../views/shequ/index.vue'
+import main from '../views/Main.vue'
+import recommend from '@/views/recommend/index.vue'
+import community from '@/views/community/trends.vue'
+import chat from '@/views/chat/chat.vue'
+import space from '@/views/space/space.vue'
+
 
 import {createRouter ,createWebHashHistory} from 'vue-router'
 
 const routes = [
-
     {
-        path:'/',
+        path : '/',
-        component : layout
+        component : login
     },
-
     {
-        path : '/login',
+        path:'/main',
-        component : Login
+        component : main,
-    }
+        children:[
+            {
+                path:'recommend',
+                component: recommend
+            },
+            {
+                path:'community',
+                component: community
+            },
+            {
+                path:'chat',
+                component: chat
+            },
+            {
+                path:'space',
+                component: space
+            }
+            
+
+        ]
+    },
+
 
 ]
-const router = createRouter({
 
+const router = createRouter({
     routes,
     history:createWebHashHistory()
-
 })
+
 export default router

src/views/Main.vue

@@ -4,15 +4,14 @@
     <el-container>
       <el-header><heade/></el-header>
       <el-container>
-        <el-aside width="250px">aa</el-aside>
+        <!-- <el-aside width="250px">aa</el-aside> -->
-
+        <!-- <el-main style="padding: 0px">
-        <el-main style="padding: 0px">
           <background/>
-        </el-main>
+        </el-main> -->
-      
+        <!-- <el-aside width="250px">aa</el-aside> -->
-        <el-aside width="250px">aa</el-aside>
+        <router-view></router-view>
-      </el-container>
       </el-container>
+    </el-container>
   
   </div>
        
@@ -25,7 +24,7 @@
 
 <script setup>
   import heade from '../components/header.vue'
-  import background from '../components/background.vue'
+  // import background from '../components/background.vue'
 </script>
 <script>
   

src/views/chat/chat.vue

@@ -0,0 +1,9 @@
+<template>
+    私信聊天
+</template>
+<script>
+export default {
+    name: 'chatIndex', // 添加组件名称
+    // 其他组件选项
+}
+</script>

src/views/community/trends.vue

@@ -0,0 +1,9 @@
+<template>
+  社区动态
+</template>
+<script>
+export default {
+  name: 'CommunityIndex', // 添加组件名称
+  // 其他组件选项
+}
+</script>

src/views/login/login.vue

@@ -0,0 +1,9 @@
+<template>
+    登录
+</template>
+<script>
+export default {
+    name: 'loginIndex', // 添加组件名称
+    // 其他组件选项
+}
+</script>

src/views/recommend/index.vue

@@ -0,0 +1,9 @@
+<template>
+    智能推荐
+</template>
+<script>
+export default {
+    name: 'RecommendIndex', // 添加组件名称
+    // 其他组件选项
+}
+</script>

src/views/shequ/index.vue

@@ -1,21 +0,0 @@
-<template>
-    <div>
-    haha
-    <div class="mb-4">
-      <el-button>Default</el-button>
-      <el-button type="primary">Primary</el-button>
-      <el-button type="success">Success</el-button>
-      <el-button type="info">Info</el-button>
-      <el-button type="warning">Warning</el-button>
-      <el-button type="danger">Danger</el-button>
-    </div>
-    </div>
-    
-</template>
-<script setup></script>
-<script>
-    export default {
-      name: 'CommunityIndex', // 添加组件名称
-      // 其他组件选项
-    }
-    </script>

src/views/space/space.vue

@@ -0,0 +1,9 @@
+<template>
+    个人空间
+</template>
+<script>
+export default {
+    name: 'spaceIndex', // 添加组件名称
+    // 其他组件选项
+}
+</script>