首页 > 其他分享 >前端学习路线图

前端学习路线图

时间:2024-07-14 16:55:39浏览次数:15  
标签:布局 前端 路线图 学习 Vue3 可以 前端开发 页面

(一)巩固基础

这是入门前端最基础的内容。。熟悉了前端开发的HTML与CSS基础知识,就能够配合UI设计师进行项目布局开发了。这一步骤共分为三部分内容:HTML、CSS和页面制作工具。HTML是前端开发入门首先要学会的东西,有了它,你才可以布局页面结构。CSS是页面美化和精细化的核心技术。想要更好的完成页面的开发,更好的与UI部门合作,这些页面制作工具是必须掌握的。
在这里插入图片描述
这里推荐尚硅谷的html+css讲的十分详细在这里插入图片描述

(二)页面布局实战

有了第一步的基础知识,你就可以实战各种页面布局了。学会后,更加夯实初级Web前端工程师水平,能够完成各种PC端与移动端网页布局与样式设计实现了。 这一步骤共分为两部分内容:布局技术,布局规范与方案。 想要轻松的完成各种PC端和手机端的布局,这些重要的布局技术必须掌握。另外一些布局规范与布局方案,是完成浏览器兼容和各种设备适配的法宝。

(三)前端开发内功

对于JavaScript这么重要的部分,一定要用书籍系统的去学习,推荐几本书口,
仅供参考:1.《你不知道的javascript》
2.《JavaScript权威指南》
3.《JavaScript高级程序设计》这部分是初学者的第一个大坎,所以一定不要忽视动手实践的重要性。主打就是跟着敲,一步一步敲,我无法用言语来描绘这个过程的曼妙,但你一定可以感受得到。这部分如果觉得书上晦涩难懂,可以去各大学习官网搜寻视频教程,跟着视频来可以缓解枯燥。这里推荐pink老师的
在这里插入图片描述
JS分为基础和高级,高级也可以学完ajax再学。刚接触会比较抽象,非计算机专业刚接触会有一定难度,但一定要打好基础。重点超多: 继承、闭包、递归、深浅拷贝、事件处理机制等等,也涉及一些手写题,手写深浅拷贝、防抖函数等等。bom部分文档对象模型和浏览器对象模型需要理解,其实内容不多。主要掌握元素增删改查、事件执行过程、定时器、一些事件属性方法等等。监听事件是一块很重要又很容易犯迷糊得部分。其中点击,鼠标移入移出,键盘操作监听,都是非常有意思得地方。我在学习这部分得时候特别喜欢放着一行控制台打印得语句,随时看到各种行为得触发反馈。aiax这部分就是进行前后端数据交互啦。需要一些网络原理内容,比如http和https啦,握手挥手等等es6部分尤其重要,一些新特性可以大大提高代码体验,比如set数据结构,扩展运算符等等贼方便啦。是面试重点,比如一些问题你可以讲一下传统is如何解决,可以用es6新增的什么特性这样。像promise,axios这部分,并不一定要求你深刻了解,也不必要求自己一定要能够手写promise,做到基础学习,知道这是什么用在哪里就可以。JavaScript部分的学习开始依附于大量的代码练习,其中也是正式开始锻炼逻辑思维能力。在此过程中也开始了手写bug的旅程。那么就有一个亟待解决的问题,学习途中遇到的问题和自己亲手写出来的BUG不知从何下手解决。依托于现在互联网的发达,可以从各个网站进行发问。当然也可以选择AI,
这里留下我一直在用的ai—KIMi----https://kimi.moonshot.cn/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(四)前段工程化

这部分要学习得东西又多又杂,但每一个都是应用广泛得技能,属于开发技能中得软实力。Node.is和Webpack推荐视频教程,了解下Webpack这个构建工具到底是干嘛的,简单了解就好,以后慢慢进阶。当下出现了比webpack更出色得构建工具VITE,相比于webpack打包更快速,配置更简易,这两个构建工具可以对比学习。其他工作实操需要的工具类就要了解git和node指令。git部分要会连仓库,拉代码,建分支,合分支,切换分支等等基本操作就行。node部分要会一些npm命令,装包卸载包,看得懂项目文件夹配置文件就可以了。

(五)工程化开发

这个步骤是从事前端工作必须掌握的重要内容,尤其是Vue、React,已经是公司开发企业项目的首选框架。 学会这个部分,你就是一名高级Web前端工程师了,那这些框架都需要学习掌握什么呢? Vue框架,需要掌握Vue3和它的生态技术。掌握了Vue3的选项式API,Vue2的项目也信手拈来。Vue3生态的每个技术都包含了很多内容,都需要你掌握它并熟练应用。像Vue3的组合式API、Vite2+SFC、VueRouter4、Vuex4、Pinia2、TypeScript基础、TS+Vue3,其他的技术栈。学会这些,你就可以基于这些技术开发Vue3的C端和B端项目了。 Vue.js致力于构建数据驱动的web应用开发框架,以简洁化,轻量级,数据驱动,模块友好等优势深受企业以及前端开发者的喜爱,成为前端开发人员必备的技能
在这里插入图片描述
在这里插入图片描述

(六)学会使用各大ui框架

当学会了以上内容 还局限于页面布局都自己一点点的手敲吗?显然是不现实的这里推荐element-ui配合vue进行开发
https://element.eleme.cn/#/zh-CN

(七)总结

当完全掌握上述内容的话基本可以获得一笔不菲薪资的工作了。让我们一起加油吧!

标签:布局,前端,路线图,学习,Vue3,可以,前端开发,页面
From: https://blog.csdn.net/readmancynn/article/details/140418682

相关文章

  • 我的STM32学习路径
    重复的操作就不写了graphLRA(STM32学习进度)-->B(第一步)-->STM32F407模板A-->C(第二步)-->GPIO-->寄存器开发寄存器开发-->看寄存器手册-->寄存器数据填充含义看寄存器手册-->物理地址+偏移地址看寄存器手册-->时钟树GPIO-->库函数开发-->看官方文档......
  • 电力需求预测挑战赛(机器学习方向)--task1 #Datawhale AI 夏令营
    一、概念电力需求的准确预测对于电网的稳定运行、能源的有效管理以及可再生能源的整合至关重要。【训练时序预测模型助力电力需求预测】二、赛题任务给定多个房屋对应电力消耗历史N天的相关序列数据等信息,预测房屋对应电力的消耗。三、赛题数据简介1、赛题数据由训练集......
  • HarmonyOS NEXT 学习笔记3--登录页面(数据绑定)
    1.代码:import{promptAction}from'@kit.ArkUI'@Entry@ComponentstructPage_textInput_onchange{//@StateUI刷新测试[注意:不是双向绑定]username:string=''password:string=''build(){Column({space:20}){......
  • 关于51单片机LED板块的学习笔记
    首先看看常见LED灯的内部结构其次下面是MCU原理图上关于LED的部分右侧VCC代表正极,左接两组电阻,目的保护电路,然后是八个LED,左侧有P20到P27八个接口接到下图CPU的对应接口上。这是工作原理图CPU经过一系列的信号传输把信号以高低电平的形式传给LED,因为LED右端始终接正极V......
  • 点云学习1
    目录一、点云基础  二、点云配准2.1点云配准基础    2.2点云配准分类2.2.1刚性配准2.2.2非刚性配准2.2.3总结三、点云配准应用3.1机器人及无人驾驶领域3.2测绘遥感领域一、点云基础           三维点云的实质是场景表面在给定坐标系下......
  • [rCore学习笔记 015]特权级机制
    写在前面本随笔是非常菜的菜鸡写的。如有问题请及时提出。可以联系:[email protected]:https://github.com/WindDevil(目前啥也没有官方文档仍然是一上来就丢出来的官方文档.只摘抄了我觉得有意思的部分:实现特权级机制的根本原因是应用程序运行的安全性不可充分信任......
  • 小白学习微信小程序开发中的用户管理与权限设置
    用户管理与权限设置是微信小程序开发中非常重要的一部分,它关乎到小程序的安全性和用户体验。本文将从用户管理和权限设置两个方面来详细介绍相关内容,并提供代码案例。一、用户管理用户管理是指对小程序的用户进行管理,包括用户注册、登录、信息获取等操作。下面以一个简单的用......
  • JVM学习(day1)
    JVM运行时数据区线程共享:方法区、堆线程独享(与个体“同生共死”):虚拟机栈、本地方法栈、程序计数器程序计数器作用:记录下次要执行的代码行的行号特点:为一个没有OOM(内存溢出)的地方虚拟机栈每要执行一个方法就往栈中放一个栈帧,包含把变量放到局部变量表中(局部变量槽),方法的......
  • 泰山派学习13--设备树LED字符驱动
    1、在泰山派设备树的/根节点上添加zbl_led子节点(路径:Z:\sdk\linux\kernel\arch\arm64\boot\dts\rockchip)打开tspi-rk3566-user-v10-linux.dts设备树源文件    在根目录下添加zbl_led子节点    2、在SDK上编译kernel(./build.shkernel)执行内核编译......
  • 《昇思25天学习打卡营第3天|初学教程/张量 Tensor》
    文章目录张量Tensor内积(InnerProduct)外积(OuterProduct)线性映射(LinearMapping)笛卡儿积(CartesianProduct)创建张量张量的属性张量索引张量运算Tensor与NumPy转换稀疏张量CSRTensorCOOTensor张量Tensor张量(Tensor)是一个可用来表示在一些矢量、标量和其他张量之......