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>

三、运行项目

在终端输入

npm install
npm run serve

本项目只是实现一个简单的静态网页,后续再完善一下功能。