pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端框架搭建完成

Browse Source
main
helloworld180 2 weeks ago
parent d3d1f40723
commit b520351ee1
10 changed files with 147 additions and 69 deletions
Show Stats Download Patch File Download Diff File

2
node_modules/.cache/eslint/7dc60d80.json generated vendored
Unescape View File

@ -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",[]]

87
src/components/header.vue
Unescape View File

@ -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; /* 加粗字体 */
}
.logo img,
.tu img {
height: 50px; /* 根据需要调整高度 */
width: auto; /* 自适应宽度 */
margin-right: 10px; /* 与菜单项的间距 */
<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') {
router.push('/main/chat')
communityName.value = '私信聊天'
}
.el-menu-item {
line-height: 70px; /* 设置菜单项的行高，和菜单高度一致 */
font-weight: bold; /* 加粗字体 */
}
</style>
<script setup>
const handleSelect = () =>{}
else if(indexPath === '2-2') {
router.push('/main/community')
communityName.value = '社区动态'
}
else if(indexPath === '4') {
router.push('/main/space')
}
}
onMounted(() => {
if (window.location.pathname === '/') {
router.push('/main/recommend')
}
})
</script>
<script>
export default
{
name: 'HeaderComponent', // 添加组件名称
// 其他组件选项
}
</script>
export default
{
name: 'HeaderComponent', // 添加组件名称
// 其他组件选项
}
</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>

46
src/router/index.js
Unescape View File

@ -1,25 +1,49 @@
import layout from '../views/Main.vue'
import Login from '../views/shequ/index.vue'
import login from '@/views/login/login.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:'/',
component : layout
path : '/',
component : login
},
{
path : '/login',
component : Login
}
path:'/main',
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

15
src/views/Main.vue
Unescape View File

@ -4,15 +4,14 @@
<el-container>
<el-header><heade/></el-header>
<el-container>
<el-aside width="250px">aa</el-aside>
<el-main style="padding: 0px">
<!-- <el-aside width="250px">aa</el-aside> -->
<!-- <el-main style="padding: 0px">
<background/>
</el-main>
<el-aside width="250px">aa</el-aside>
</el-container>
</el-main> -->
<!-- <el-aside width="250px">aa</el-aside> -->
<router-view></router-view>
</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>

9
src/views/chat/chat.vue
Unescape View File

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

9
src/views/community/trends.vue
Unescape View File

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

9
src/views/login/login.vue
Unescape View File

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

9
src/views/recommend/index.vue
Unescape View File

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

21
src/views/shequ/index.vue
Unescape View File

@ -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>

9
src/views/space/space.vue
Unescape View File

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