前端学习究竟该学什么？要学哪些东西？（以Vue为例）

辰辰Ado_I

已于 2023-12-17 11:08:57 修改

阅读量676

点赞数 12

分类专栏： Web程序设计文章标签：前端学习 vue.js javascript node.js npm 前端框架

于 2023-12-17 10:44:12 首次发布

本文链接：https://blog.csdn.net/weixin_74996125/article/details/135039309

版权

Web程序设计专栏收录该内容

2 篇文章 1 订阅

订阅专栏

温馨提示：文章仅告诉大家刚开始学习前端可能会涉及的部分知识，为大家提供一个初学时候的大致学习思路，明白前端有什么，需要学什么。如果你有一小部分Web开发的基础，请直接移步第五大点，浏览更佳。文章最后将为大家提供前端学习相关资源。

一、Web前端开发技术概述：

许多人刚开始接触前端的学习都是学习的web网页前端编程，自然接触到的是html、css、javascript三大剑客。不论学习怎么样的网页前端技术，这仨你都绕不开。也就是说，不论是火遍全球的React还是名气超大的Vue，这些都仅仅是框架而已，其目的是规范、方便我们的项目开发过程。所以，web前端的学习，首先需要学习的就是HTML、CSS、JavaScript的基础语法。（除此自外，大家也可以了解一下ES6、TypeScript、SCSS等等相关知识。）

二、JavaScript：

那么说到JavaScript，这是前端代码里面逻辑要求最高的，你可以简单理解为他是所有网页操作的核心。你要网页怎么做，怎么去响应你的事件（鼠标点击、按键提交、鼠标移入等等）。你甚至可以理解为他就是一门简化的Java语言（bushi），当然他跟Java没有任何关系，要硬说关系，那就是刚刚发行时蹭了Java的热度。（对于JavaScript想要深入了解的同学可以学习Nodejs。）

综上所述，JavaScript是一门真正的编程语言，也是web前端网页设计的核心。

三、CSS、HTML

这俩就简单比喻一下。

HTML：网页结构。（怎么排版、都有哪些东西（组件））

CSS：网页的样式（各个模块的大小、颜色、布局格式等等的设置）

四、前端总述：

当然，前端设计也不仅仅是Web网页设计，比如我们可以用Python设计一个前端系统界面，这时我们可以用上PyQt5，亦或者单独的Qt语言等等，只要是UI设计相关的，我们都可以叫做前端设计。

前端开发往往涉及到在网页端就需要处理的逻辑，也就是上文所说的JavaScript就是为了在网页就处理掉一些简单的逻辑问题，可以避免返回服务器端。

那么就目前上手门槛最低的web前端设计需要大家学习什么呢？

（暂不提及SCSS、TypeScript等内容）以下内容以精简为主，方便大家更快了解。

五、Web前端设计内容

三大前端主流框架：Angular、React、Vue。

首先就是三大框架，个人建议学习时，以Vue入手学习，其上手难度远低于React。同时Vue也是目前国内的主流框架。

Vue中的难点：

首先Vue是组件化编程，涉及到规范编程格式，你需要了解如何下载需要的包，如何渲染组件，如何结合组件，如何组件传值（掌握两种就可以了）、如何消除组件之间的影响、以及全局Style的设置等等。最开始学习会很不习惯，渐渐的，大家就会体会到Vue组件化编程的好处了。

Vue中的常用包：

Echarts：这是一款构建可视化组件的工具，非常常用！也有自己固定的一套语法规则，可以适当学习（非常简单，一学就会）。

Apache ECharts

Element-ui / Element-Plus：这里面全是各种样式已经设计好的组件，甚至包含了各种功能，这就是组件化编程的好处之一，可以直接调用别人写好的组件。

Element - 网站快速成型工具

axios：说到这个包，就不得不说前端编程的另一个重要的地方了，那就是你要学会与后端联合，在你学习前端，未学习后端时，这一块往往是你最难搞懂的地方，但如果你学习完前端后接触后端的学习，你就会豁然开朗，真正明白这两者是如何联系起来的。所以axios就是一个方便我们发起请求，用于请求后端数据的一个包。

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

当然肯定不止以上三种，并且是远远不止，在此我给大家列出来部分，就不一一详解了，这需要大家在学习和实践中慢慢积累：

mock 数据模拟(模拟后端数据)

anime 二维动画库
        vue-ls   vue中操作本地存储
        js-cookie   操作cookie
        moment   日期处理库
        threejs WebGL图形及3D动画处理库
        TinyMCE   富文本编辑器
        vue-prism-editor   代码编辑器
        Prism.js   代码示例高亮显示
        highlight.js   代码示例高亮显示
        crypto-js   aes 加解密
        qrcodejs2   生成二维码
        clipboard   复制到剪切板
        vue-clipboard2   复制到剪切板
        downloadjs   js下载文件
        file-saver   js下载文件
        screenfull   全屏切换
        soket.io-client   websoket实时通讯客户端   https://socket.io/
        mitt   Vue3事件总线
        swiper   轮播