当前位置：首页 > news >正文

Vue进行前端开发流程

news 来源：原创 2025/9/20 16:50:19

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

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

Vue进行前端开发流程

一、创建vue项目创建vue项目：先进入要操作的目录下，注意本项目是用vue2开发的。 vue create vue项目名二、项目开发 1.创建项目结构 2.开发功能模块主入口App.vue <template><div class"boss-app"><Header /><m…...

编程日记 2025/9/20 16:50:19

【深度学习:实战篇】--PyTorch+Transformer谣言检测系统

任务：构建一个多模态谣言检测模型。数据集描述如下： 数据集包含以下模态： 谣言文本：谣言的核心文本信息。2. 配图：与谣言文本相关的图像数据；3. OCR 文本：可以通过 PaddleOCR 从配图中提取的…...

编程日记 2025/9/20 11:04:27

PostGreSQL/openGauss表膨胀处理

如果面试官问你，Oracle与PG/OG最大的区别是什么？你要是没回答出MVCC机制，表膨胀，那你多半挂了。在PG/OG数据库中，命令vacuum full，插件pg_repack用于处理表膨胀，但是别高兴得太早，如…...

编程日记 2025/9/16 9:43:50

视频融合平台EasyCVR搭建智慧粮仓系统：为粮仓管理赋能新优势

一、项目背景当前粮仓管理大多仍处于原始人力监管或初步信息化监管阶段。部分地区虽采用了简单的传感监测设备，仍需大量人力的配合，这不仅难以全面监控粮仓复杂的环境，还容易出现管理 “盲区”，无法实现精细化的管理。而一套先进…...

编程日记 2025/9/18 18:16:07

基于 Node.js 和 Spring Boot 的 RSA 加密登录实践

在当今的互联网应用开发中，用户数据的安全性至关重要。登录功能作为用户进入系统的第一道防线，其安全性更是不容忽视。本文将介绍一种基于 RSA 加密的登录方案，前端使用 Node.js 的 node-forge 库对密码进行公钥加密，后端使用 Spr…...

编程日记 2025/9/20 12:34:24

jupyter在Pycharm中遇到的一个问题

jupyter比较简洁，可以分块执行，下面显示结果，还能用Markdown写注释，总体来说来还是比较好用的。但是遇到了一个奇怪的问题，从一个py文件中导入一个函数，结果输出为None。但是如果直接把这个函数的内容复制…...

编程日记 2025/9/14 11:56:44

十二、buildroot系统 adb登录权限设置

4.6.4、adb权限设置 android-adbd 是 ADB（Android Debug Bridge）的守护进程，允许开发者远程访问和调试设备。它通常用于 Android 设备，但在嵌入式 Linux上，也可以用来提供远程 shell、文件传输和应用调试功能。 …...

编程日记 2025/9/18 12:22:31

MySQL、Oracle 和 PostgreSQL 是三种主流的关系型数据库的主要原理性差异分析

MySQL、Oracle 和 PostgreSQL 是三种主流的关系型数据库，它们在底层原理和设计哲学上存在显著差异，尤其在存储引擎、事务处理、并发控制、索引结构、复制机制等方面。以下是它们的主要原理性差异分析： 1. 存储引擎与架构设计 MySQL 多存储引…...

编程日记 2025/9/11 1:16:13

【AI开源大模型工具链ModelEngine】【01】应用框架-源码编译运行

ModelEngine提供从数据处理、知识生成，到模型微调和部署，以及RAG（Retrieval Augmented Generation）应用开发的AI训推全流程工具链。 GitCode开源地址：https://gitcode.com/ModelEngineGitee开源地址：https…...

编程日记 2025/9/18 20:26:18

一文掌握 google浏览器插件爬虫的制作

更多内容请见：爬虫和逆向教程-专栏介绍和目录文章目录一、技术栈1. 前端技术（浏览器插件开发）2. 爬虫技术3. 后端（可选）4. 整体技术栈组成二、开发步骤1. 创建 Chrome 插件基础结构（1）`manifest.json` 配置（2）前端页面（`popup.html`）（3）前端逻辑（`popup.js`）…...

编程日记 2025/9/9 17:39:46

【leetcode 100】贪心Java版本

划分字母区间题目我的思路：第一次没有一点思路，第二次看了官网思路后，写的以下答案，没有搞明白循环遍历， //是不对的以下： class Solution {public List<Integer> partitionLabels(String s) {Li…...

编程日记 2025/9/12 19:46:10

Linux用Wireshark进行Thread网络抓包关键步骤

用Nordic nRF52840 Dongle作为RCP配合Wireshark进行Thread网络抓包是debug Thread网络的有效工具之一，主要流程在这里，不再赘述：官方流程但是按官方流程会卡在一个地方，第一次费劲解决后，今天在另一台机器重新配的时…...

编程日记 2025/9/10 4:59:23

项目管理中客户拒绝签字验收？如何处理和预防

客户拒绝签字验收？如何处理和预防？核心在于：正面沟通、证据留存、灵活应对、合同条款明确、阶段验收机制。其中正面沟通格外关键，如果在发现客户迟迟不愿签字时能够主动沟通，了解其顾虑或不满并迅速针对性解决&#xf…...

编程日记 2025/9/19 12:11:11

当在拉取镜像时报以下错误时，可以通过更换镜像源解决 rootlocalhost:/etc/docker# docker pull mysql Using default tag: latest Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for …...

编程日记 2025/9/18 11:34:30

【JAVA】十、基础知识“类和对象”干货分享~（三）

目录 1. 封装 1.1 封装的概念 1.2 访问限定符 public（公开访问） private（私有访问） 1.3 包 1.3.1 包的概念 1.3.2 导入包中的类 1.3.3 自定义包 2. static成员 2.1 static变量（类变量） 2.1.1 sta…...

编程日记 2025/9/12 21:54:11

Open GL ES -＞ SurfaceView + 自定义EGL实现OpenGL渲染框架

SurfaceView 自定义EGL实现OpenGL渲染在Android开发中，当需要灵活控制OpenGL渲染或在多个Surface间共享EGL上下文时，自定义EGL环境是必要的选择核心实现流程 -------------------- -------------------- -------------------- | 1. 创建Su…...

编程日记 2025/9/9 20:36:04

Solidity入门实战—web3

项目介绍在这个项目中，我们建立一个小型智能合约应用，他允许用户向合约地址捐赠，允许合约所有者从合约中提取余额；并且还设定了捐赠的金额门槛；针对直接对地址进行的捐赠行为，我们也予以记录源代码 ht…...

编程日记 2025/9/10 1:05:51

Open Scene Graph动画系统

OSG 提供了强大的动画功能，支持多种动画实现方式，从简单的变换动画到复杂的骨骼动画。以下是 OSG 动画系统的全面介绍： 1. 基本动画类型 1.1 变换动画 (Transform Animation) // 创建动画路径 osg::AnimationPath* createAnimationPath(co…...

编程日记 2025/9/20 10:56:21

无需libpacp库，BPF指令高效捕获指定数据包

【环境】无libpacp库的Linux服务器【要求】高效率读取数据包，并过滤指定端口和ip 目前遇到两个问题一是手写BPF，难以兼容，有些无法正常过滤二是性能消耗问题，尽可能控制到1% 大方向：过滤数据包要在内核层处理&…...

编程日记 2025/9/10 12:38:36

重回全面发展亲自操刀

项目场景： 今年工作变动，优化后在一家做国有项目的私人公司安顿下来了。公司环境不如以前，但是好在瑞欣依然可以每天方便的买到。人文氛围挺好，就是工时感觉有点紧，可能长期从事产品迭代开发，一下子转变做项…...

编程日记 2025/9/9 17:47:48

DimensionX

旨在通过可控的视频扩散模型从单张图像生成高质量的3D和4D场景。 1. 背景与问题 3D和4D生成的目标 3D生成：从单张或多张2D图像中重建出三维场景或物体，包含空间信息（长、宽、高）。4D生成：在3D的基础上加入时间维度&a…...

编程日记 2025/9/7 9:11:47

2025年04月08日Github流行趋势

项目名称：markitdown 项目地址url：https://github.com/microsoft/markitdown项目语言：Python历史star数：44895今日star数：1039项目维护者：afourney, gagb, sugatoray, PetrAPConsulting, l-lumin项目简介&a…...

编程日记 2025/9/5 22:15:36

数据结构与算法-数学-容斥原理，高斯消元解线性方程组

容斥原理容斥原理用于计算多个集合的并集元素个数，公式为 ∣A1∪A2∪⋯∪An∣∑i1n∣Ai∣−∑1≤i<j≤n∣Ai∩Aj∣∑1≤i<j<k≤n∣Ai∩Aj∩Ak∣−⋯(−1)n−1∣A1∩A2∩⋯∩An∣ 举一个例题： 给定一个整数 nn 和 mm 个不同的质数 p1,p2,…,p…...

编程日记 2025/9/12 6:54:36

告别运动控制不同步：某车企用异构PLC实现99.98%焊接合格率

在长三角某新能源汽车电池工厂，工程师们正面临棘手的生产难题：随着产线速度提升到每分钟12个电芯，原有PLC系统开始频繁出现运动控制不同步现象。这直接导致极片焊接合格率从99.2%骤降至94.7%，每条产线日均损失超23万元。这个场景折…...

编程日记 2025/9/19 9:44:57

BetaFlight参数配置解读

BetaFlight参数配置解读 📌相关篇《Betaflight固件编译和烧录说明》🥕各型号已编译好的配置文件资源（.config）：https://github.com/betaflight/unified-targets/tree/master/configs/default🌿各型号配置头…...

编程日记 2025/9/18 15:11:02

PowerBI累计分析

累计分析累计分析主要有三种：年初至今（YTD）、季初至今（QTD）、月初至今（MTD）。DAX中计算累计的函数有两类：一类是datesytd、datesqtd、datesmtd，该类返回一个单列日期表…...

编程日记 2025/9/10 22:31:41

多模态大语言模型arxiv论文略读（七）

MLLM-DataEngine: An Iterative Refinement Approach for MLLM ➡️ 论文标题：MLLM-DataEngine: An Iterative Refinement Approach for MLLM ➡️ 论文作者：Zhiyuan Zhao, Linke Ouyang, Bin Wang, Siyuan Huang, Pan Zhang, Xiaoyi Dong, Jiaqi Wang,…...

编程日记 2025/9/17 16:44:52

STM32单片机入门学习——第27节: [9-3] USART串口发送串口发送+接收

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.04.08 STM32开发板学习——第27节: [9-3] USART串口发送&串口发送接收前言开发板说…...

编程日记 2025/9/19 5:35:19

【元表 vs 元方法】

元表 vs 元方法 —— 就像“魔法书”和“咒语”的关系 1. 元表（Metatable）：魔法书是什么？ 元表是一本**“规则说明书”**，它本身是一个普通的 Lua 表，但可以绑定到其他表上，用来定义这个表应该…...

编程日记 2025/9/18 22:27:26

小型园区网实验

划分VLAN SW3 [sw3]vlan batch 2 3 20 30 [sw3]interface GigabitEthernet 0/0/1 [sw3-GigabitEthernet0/0/1]port link-type access [sw3-GigabitEthernet0/0/1]port default vlan 2 [sw3-GigabitEthernet0/0/1]int g0/0/2 [sw3-GigabitEthernet0/0/2]port link-type acces…...

编程日记 2025/9/13 6:28:39

一、创建vue项目

二、项目开发

1.创建项目结构

2.开发功能模块

三、运行项目

相关文章：