前端找工作?真的不难 看看你会哪些(不定时更新)

黄色背景标记 非常重要、必须熟练掌握,面试必问
红色文字标记 开发过程中用的最多

  1. Html5 Css3 静态页面还原 淘宝,京东等大型网站首页。单页面即可
  2. Js掌握到事件(例如点击,鼠标、键盘),定时器,Es6新方法面试必问
  3. Vue2的生命周期,什么阶段做什么事(面试必问
  4. router路由跳转,传参,子路由,路由拦截面试必问
  5. Vuex的使用,state,mutation,action,getter,module,概念意义用法 (面试必问
  6. filter,watch,computed监听器 过滤器 计算属性 (面试必问
  7. 组件通信,父子组件传参。
  8. 封装components组件,复用
  9. 必须熟练ElementUI,比如使用UI库里面的时间选择器,要熟练使用里面有的event方法,并且能够改写ElementUi组件样式。
  10. 有自己的思想,对于界面的实现, 如何达到最方便,组件的复用性。

这是初级前端pc端必须掌握的东西👆

大致如下
HTML CSS Js
Vue2
ElementUI
es6

当然一个优秀的前端开发不应该只会这么一点东西

  1. Vue项目的移动端适配,方法简单但是要掌握熟练
  2. 移动端的组件 VantUI 熟练掌握
  3. 不推荐移动端项目依旧使用elementUI,页面大小不好适配

还会移动端够吗?

我觉得不够,优秀的前端应该足够内卷。
还必须掌握如下:小程序

  1. 微信原生小程序的页面创建
  2. tobBar页面 以及页面跳转
  3. Vant Weapp的熟练
  4. uniapp小程序虽然与vue很像,但还是有一点点页面标签的区别
  5. uniapp小程序使用Vant组件开发

这里只是说了使用uniapp开发,以及微信原生小程序开发、
没有去细说,赋值修改,请求后台接口,处理跨域,引入组件,监听变化,跳转传参,methods方法,页面样式。 这些都是必须掌握的。

说点基础的吧,这些都不切实际。
html,能够仿写一个官网首页,我当时写静态单页面是仿写的boss直聘,就是这个招聘网站的首页
css,这个水平在于掌握程度,不只是宽高大小那么简单

  • 定位position
  • 弹性布局flex
  • 浮动float
  • 伪元素选择器 ::before ::after 等
  • 伪类选择器 :hover (悬浮显示效果)
  • margin和padding的使用
  • border,background,等等

再说一说js吧

  • 获取dom节点
  • 修改节点里面的文字内容等
  • 点击事件 鼠标移入移出 鼠标区域内移动 键盘事件
  • 定时器 执行单次和无限次的两种
  • cookie localstorage sessionStorage区别,以及用法。获取存储
  • 等等等方法 需要掌握的也不少
  • 数组的方法 运算符
  • 字符串的方法
  • 闭包 构造函数等
  • ajax,简单掌握一下,主流是axios

到这里就到了Vue2

  • 搭建Vue2项目 适配移动端
  • 页面有子组件引入 搭建而成
  • 能够熟练写监听器,以及计算属性之类的
  • 父子组件传参 熟练
  • 生命周期
  • v-for循环,v-if和v-show,v-model双向绑定,v-on(简写就是@),v-bind(简写:冒号),v-html和v-text,常用的基本是这些 冷门的v-noce只渲染一次 基本用得少
  • VueX的state变量、mutations方法,getter计算属性方法, 在vue页面中引用 使用,必须掌握

axios ajax向后台请求方法 拿到回调数据,渲染页面 赋值等等。


前端开发就是这些,对了,这是初级前端
中级前端要掌握Vue3,ts,还有vite pinia等新技术,还有map和echart这些组件库也要会用。


这里补充一点点

开发过程中,我遇到的一些东西
1、UEditor富文本编辑器:这个是百度出的富文本编辑器
样子长这样👇
官网
在这里插入图片描述
原因是甲方喜欢这种选项很多的这种风格的富文本编辑器
下面这种新版的文本编辑器就不喜欢用
wangEditor编辑器官网
在这里插入图片描述

2、qrcodejs2【生产二维码】或者vue-qr
我出过一篇把url地址生成为二维码的教程点我查看,用到的就是qrcodejs2,
这个是指定一个div,赋予id,然后生成一个二维码图片。如果用的是vue-qr那就是组件了,用法就是引入,传入参数。

同一个页面多个二维码推荐用vue-qr
只有一个二维码, 推荐用qrcodejs2,因为我当时的功能就是,把当前页面的地址生成为一个二维码,手机扫码打开到这个页面。刚好mobile端和pc端都是一个ip地址,所以可以这样玩。访问的时候对设备进行了判定。

3、swiper轮播图插件
swiper官网
当时做的一个功能是轮播图,这个轮播图,不要左右箭头,要能鼠标拖动它,左右轮播。elementUI的走马灯做不到这个效果。然后就接触到了这个轮播图插件。展示效果与走马灯一样,只是它可以拖动当中的内容进行左右切换,而且拖动切换,并不会触发点击里面的内容。(参考轮播图案例地址,我写的

4、vue-simple-uploader断点续传、分片上传,上传组件
做项目的时候遇到了视频上传,少则几百mb,多则上G
没办法,断点续传,这个也是组件,用法的话,刚开始不熟练,但是成功之后发现,它跟elementUI的上传下载其实没啥区别,就是那些上传的函数名不同,其他都类似的。csdn有很多教程,看了很多,不知道哪些有用哪些没用,有时间我出一个案例吧(代码复制可用的那种)。

5、vue-schart
这个是浓缩版的Echart,vue-schart只有四种,饼状、柱状、折线、
schart中文文档
在这里插入图片描述
参考图复制别人的,这是vue-schart的四种格式图

现在遇到的一些组件插件就是这些,最近在搞一个东西,就是把table里面的表格数据,导出为excel表格,多选框选中来导出表格数据,无需后端做操作的那种,以及上传excel表格的预览图插件,让你上传文件的时候还能预览一下,防止上传错文件。这些都是最近准备写的


5、对接app,嵌入开发的h5页面。(2022年9月24日 更新)
并不是新接的项目,而是把我们已有的项目。(正在使用中已上线)
嵌入到某民生app中,需要阅读app的开发文档,以及api接口。重点是,我们需要调用app的接口,例如我在app上有一个按钮时进入我的项目。
在这里插入图片描述
app的自带接口(部分),要调用还要看app的js sdk文件,是否能引用。这个需要琢磨一下的。

我这个app的api接口文档,没有vue的教程,就只有那种html引入然后再js中使用的,后面我复制了jsSDK的源码,自己稍作修改,就可以在vue中挂载到全局使用了。也不难。只是没对接过多少有一点困难

一进来我就要走一遍app的接口,获取个人信息以及是否登录(未登录跳转app的登录页面),获取到信息之后,然后才进入到我的项目页面。

当然,我只是负责开发h5页面(移动端),在app上面的那种入口按钮,不是我做,我只需要做好然后部署上去,他们做app的团队,拿到我的项目链接,嵌入就好了。

近期所遇到的开发就是这些,适配移动端教程我有出一篇很详细的博文,有不懂的可以评论区问我,除了休息日,我基本上有工作日半天的时间都在逛csdn,看到消息会回复

  • 5
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 26
    评论
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿民不加班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值