一、創建vue項目

創建vue項目：先進入要操作的目錄下，注意本項目是用vue2開發的。

vue create vue項目名

二、項目開發

1.創建項目結構

?

2.開發功能模塊

主入口App.vue

<template><div class="boss-app"><Header /><main class="container"><section class="search-section"><div class="search-box"><input type="text" placeholder="搜索職位/公司/地點"><button class="search-btn">搜索</button></div></section><JobCategory /><div class="content-wrap"><JobList /><CompanyList /></div></main></div>
</template><script setup>
import Header from './components/Header.vue'
import JobCategory from './components/JobCategory.vue'
import JobList from './components/JobList.vue'
import CompanyList from './components/CompanyList.vue'
</script><style scoped>
.boss-app {font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.container {max-width: 1200px;margin: 0 auto;padding: 0 15px;
}
.search-section {padding: 30px 0;text-align: center;
}
.search-box {display: flex;max-width: 800px;margin: 0 auto;
}
.search-box input {flex: 1;height: 48px;padding: 0 15px;border: 1px solid #00b4a6;border-radius: 4px 0 0 4px;font-size: 16px;
}
.search-btn {width: 120px;background: #00b4a6;color: white;border: none;border-radius: 0 4px 4px 0;font-size: 16px;cursor: pointer;
}
.content-wrap {display: flex;margin-top: 30px;gap: 20px;
}
</style>

頂部導航Header.vue

<template><header class="boss-header"><div class="container"><div class="header-content"><div class="logo"><img src="../assets/logo.png" alt="BOSS直聘" width="120"></div><nav class="main-nav"><a href="#" class="active">首頁</a><a href="#">職位</a><a href="#">公司</a><a href="#">APP</a><a href="#">消息</a></nav><div class="user-actions"><a href="#">登錄</a><a href="#" class="register">注冊</a></div></div></div></header>
</template><style scoped>
.boss-header {height: 60px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header-content {display: flex;align-items: center;height: 60px;
}
.logo {margin-right: 40px;
}
.main-nav {display: flex;gap: 30px;
}
.main-nav a {color: #333;text-decoration: none;font-size: 16px;
}
.main-nav a.active {color: #00b4a6;font-weight: bold;
}
.user-actions {margin-left: auto;display: flex;gap: 15px;
}
.register {color: #00b4a6;font-weight: bold;
}
</style>

職位分類JobCategory.vue

<template><section class="job-category"><h2 class="section-title">熱門職位</h2><div class="category-list"><div v-for="category in categories" :key="category.id" class="category-item"><h3>{{ category.name }}</h3><div class="tags"><span v-for="tag in category.tags" :key="tag">{{ tag }}</span></div></div></div></section>
</template><script setup>
const categories = [{id: 1,name: '技術',tags: ['Java', 'Python', '前端', '算法', '測試', '架構師']},{id: 2,name: '產品',tags: ['產品經理', '產品總監', '數據產品', '硬件產品']},{id: 3,name: '設計',tags: ['UI設計', '交互設計', '平面設計', '3D設計']}
]
</script><style scoped>
.job-category {margin-top: 20px;
}
.section-title {font-size: 20px;color: #333;margin-bottom: 15px;
}
.category-list {display: flex;gap: 30px;
}
.category-item {flex: 1;background: #f8f8f8;padding: 15px;border-radius: 4px;
}
.category-item h3 {font-size: 16px;margin-bottom: 10px;color: #333;
}
.tags {display: flex;flex-wrap: wrap;gap: 8px;
}
.tags span {background: white;padding: 4px 10px;border-radius: 12px;font-size: 14px;color: #666;cursor: pointer;
}
.tags span:hover {color: #00b4a6;
}
</style>

?職位列表JobList

<template><section class="job-list"><div class="list-header"><h2>推薦職位</h2><a href="#">查看更多 ></a></div><ul class="jobs"><li v-for="job in jobs" :key="job.id" class="job-item"><div class="job-main"><h3>{{ job.title }}</h3><p class="salary">{{ job.salary }}</p><p class="company">{{ job.company }}</p><div class="tags"><span v-for="tag in job.tags" :key="tag">{{ tag }}</span></div></div><div class="job-extra"><p class="location">{{ job.location }}</p><p class="time">{{ job.time }}</p></div></li></ul></section>
</template><script setup>
const jobs = [{id: 1,title: '高級前端開發工程師',salary: '25k-50k',company: '字節跳動',tags: ['Vue', 'React', 'TypeScript'],location: '北京·海淀區',time: '3分鐘前'},{id: 2,title: 'Java架構師',salary: '40k-70k',company: '阿里巴巴',tags: ['Spring Cloud', '分布式', '高并發'],location: '杭州·余杭區',time: '1小時前'}
]
</script><style scoped>
.job-list {flex: 2;
}
.list-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;
}
.list-header h2 {font-size: 18px;color: #333;
}
.jobs {list-style: none;padding: 0;margin: 0;
}
.job-item {padding: 20px;border: 1px solid #eee;border-radius: 4px;margin-bottom: 15px;display: flex;justify-content: space-between;
}
.job-item:hover {box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.job-main h3 {font-size: 16px;margin: 0 0 8px 0;color: #333;
}
.salary {color: #ff6b00;font-weight: bold;margin: 0 0 8px 0;
}
.company {color: #666;margin: 0 0 10px 0;
}
.tags {display: flex;gap: 8px;
}
.tags span {background: #f0f7f6;color: #00b4a6;padding: 2px 8px;border-radius: 2px;font-size: 12px;
}
.job-extra {text-align: right;
}
.location, .time {color: #999;margin: 0;font-size: 12px;
}
</style>

公司列表CompanyList

<template><section class="company-list"><div class="list-header"><h2>熱門公司</h2><a href="#">查看更多 ></a></div><ul class="companies"><li v-for="company in companies" :key="company.id" class="company-item"><div class="company-logo"><img :src="company.logo" :alt="company.name"></div><div class="company-info"><h3>{{ company.name }}</h3><p class="industry">{{ company.industry }}</p><p class="scale">{{ company.scale }}</p><div class="jobs"><span v-for="job in company.hotJobs" :key="job">{{ job }}</span></div></div></li></ul></section>
</template><script setup>
const companies = [{id: 1,name: '騰訊科技',logo: 'https://via.placeholder.com/60',industry: '互聯網',scale: '10000人以上',hotJobs: ['前端開發', '產品經理', '數據分析']},{id: 2,name: '字節跳動',logo: 'https://via.placeholder.com/60',industry: '互聯網',scale: '10000人以上',hotJobs: ['算法工程師', '運營總監', '測試開發']}
]
</script><style scoped>
.company-list {flex: 1;
}
.companies {list-style: none;padding: 0;margin: 0;
}
.company-item {padding: 15px;border: 1px solid #eee;border-radius: 4px;margin-bottom: 15px;display: flex;gap: 15px;
}
.company-item:hover {box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.company-logo img {width: 60px;height: 60px;border-radius: 4px;object-fit: cover;
}
.company-info h3 {font-size: 16px;margin: 0 0 5px 0;color: #333;
}
.industry, .scale {color: #666;margin: 0 0 5px 0;font-size: 13px;
}
.jobs {display: flex;flex-wrap: wrap;gap: 5px;margin-top: 8px;
}
.jobs span {background: #f0f7f6;color: #00b4a6;padding: 2px 8px;border-radius: 2px;font-size: 12px;
}
</style>

三、運行項目

?在終端輸入

npm install
npm run serve

? ? ? ?本項目只是實現一個簡單的靜態網頁,后續再完善一下功能。

?

?