Vue进行前端开发流程

一、创建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>