前端技术栈入门

文章目录

前言
一、前端是什么？
二、前端技术栈一条龙
- 1.html+css+javascript（基础知识掌握的请跳过）
- 2.框架技术([react](https://react.docschina.org/)+[dva](https://dvajs.com/)+[umi](https://umijs.org/zh-CN)+[antd](https://ant.design/index-cn))
总结

前言

对于很多想要入门前端技术的朋友来说，首先了解到的自然是html，css，javascrpite这些技术名词，在进行短期学习之后也确实可以制作简单的网页，然而仅仅掌握这些距离一个成熟的项目还有很远，这里对前端技术栈进行一次梳理，让想要入门前端开发有一个更加明确的思路和方向

一、前端是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、前端技术栈一条龙

1.html+css+javascript（基础知识掌握的请跳过）

前端三剑客
我们先来看这张图，这是前端最基础的三个组成部分（这个太过基础，可以参考阮一峰的博客），通过html+css+js可以构建一个最简单的页面，在本文中不进行代码编写讲解，但是会对技术栈进行拓展。
在这里插入图片描述
html从很早开始就被用为万维网的信息表示语言。就其版本而言经历了1.0，2.0，3.0，4.0，5.0。5.0就是当前版本，有很多新的好用的特性，于是我们称其为html5(h5)。h5在”三剑客”里功能作用就是布局，通俗一点来说就是画块/分区域。下面我们来看一个实例：

在这里插入图片描述

对上图网站而言html起到了什么作用呢，我们先对页面进行画块，可以看下图

在这里插入图片描述
在这张图片里我们用红色的方框进行了区域划分，在这里每一个区域都是一个标签，

等等。每个大区域里面又有小的区域，也就是大标签里套小标签。这就是html超文本标记语言的作用。

.routeButton { height: 200px; width: 100px; color: white; background-color：black; } .boxA { height: 200px; width: 100px; color: white; background-color：black; } .boxB { height: 200px; width: 100px; color: white; background-color：black; }

 .boxA { height: 200px; width: 100px; color: white; background-color：black; .boxB { height: 200px; width: 100px; color: white; background-color：black; .routeButton { height: 200px; width: 100px; color: white; background-color：black; } } }

这样的css代码层次分明，而且css/sass同时支持我们使用变量，额外内置了更多功能。

2.框架技术(react+dva+umi+antd)

说到框架，我们举一个简单的例子，如果我们需要做西红柿炒蛋(一个成型的项目)，我们知道材料有西红柿(html)、鸡蛋(css)、盐(javascript)，那么怎么才能做一份好吃的西红柿炒鸡蛋呢？这时候我们就需要一个电饭锅(项目框架)了，当我们将材料丢进电饭锅后它会智能的为我们生成一个项目。那么现在上主流的电饭锅有哪几种呢？三种！九阳（vue），苏泊尔（react）、美的（angular）。九阳（vue）最便宜因此上手难度也就最低，同时也是国产货(尤雨溪个人作品)，但是因为太便宜大多数功能已经写死了（自由度低）。而美的则是最贵的(上手难度最高，学习成本最高)，但是他比较智能(自由度高)。而苏泊尔(reacct)则介于两者之间。（在这里我们只介绍react技术栈，不讨论后台框架express.js，koa.js等等，也不讨论jquery）

在这里插入图片描述
在进行react项目开发过程中我们发现A页面需要一些数据进行登录，比如说学生学号。A页面中有一个子页面B页面需要学生账号进行查询对应学生的课表数据。那么这时我们会将A页面请求到的学生数据传递给B页面使用，虽然react可以使用props来进行数据传递/控制操作，如果页面一多，数据层级一多，使用起来会非常复杂。如果A里面有子页面B，B有C，C有D…一直到Z页面，现在需要从Z页面拿到A页面的数据，我想使用props一层一层传递开发人员可能会疯掉。因此react支持开发者使用redux专门对数据进行处理，在这里我们有一种更好的选择那就是dva.js。

这时的框架结构是这样的：
在这里插入图片描述
现在我们也处理好了数据问题，但是突又有了新需求，项目需要进行权限管理、环境管理、依赖管理、webpack打包控制。这是就轮到umi.js出场了，umi.js就像一块手表壳，里面由无数个小齿轮，每个小齿轮都是一个第三方的功能插件，分别负责不同的功能，我们可以通过控制表壳(umi.js)上的旋钮(配置文件)进行时间调整(功能控制)。

此时项目结构是这样的:
在这里插入图片描述