【项目实训】前端页面初探索(前期探索)

前期,由于没有确定页面展示形式,于是进行了很多探索

  • 首先安装element-ui
  • 导入elemnt-plus

添加use:

  • 设置一个全局样式
  • 编写导航栏

    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    background-color="#95d475"
    text-color="#606266"
    active-text-color="#ffd04b"
    mode="horizontal"
    @select="handleSelect"
    >



    职跃助手

    首页
    面试经验总结
    模拟面试

样式如图:

  • 进行页面间路由

首先在index.js中编写路由逻辑

其次,在导航栏部分编写点击实现跳转页面的逻辑,即在el-menu处加router,并把index设置为相应的页面

  • 编写面试经验页

首先编写两个选择器用来选择公司岗位,然后进行确认

需要注意,为了实现选择一个选项后,在选项框中出现该选项,要把v-model添加到data中:

实现效果如下:

相关推荐
llz_1122 小时前
web-第二次课后作业
前端·后端·web
vipbic7 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
ZC跨境爬虫9 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
小陈同学呦9 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
开发者每周简报9 小时前
网海三部曲·无名宗师传
javascript·人工智能
喵个咪9 小时前
GoWind Toolkit 前端代码生成|Vue3(ElementPlus/Vben)、React(AntDesign)全自动一键生成教程
前端·vue.js·react.js
qq_25183645710 小时前
SpringBoot+Vue 共享电池柜管理系统 完整实现 前后端分离项目实战 完整代码
vue.js·spring boot·后端
摆烂大大王11 小时前
玩转 OpenClaw:用 TaskFlow + Heartbeat 打造自动化工作流
前端·人工智能·自动化
zhangxingchao11 小时前
AI 大模型核心六:量化、Workflow 与 Agent、多轮 RAG
前端·人工智能·后端
梦想的颜色11 小时前
TypeScript 完全指南(上):从零开始掌握类型系统
前端·typescript