前端常见框架及组件的大体认识

缺乏、安全感 2022-09-04 02:45 495阅读 0赞

# 前端的知识体系 #

做前端，不只是 **html+css+javascript**，你必须知道更多。

## 一、框架 ##

### 1. vue ###

![1732e1a0b2d0495fb82241d04d019ac5.png][]

#### 简介 ####

[vue][] 于 2014 年 2 月由 Google 前员工 **尤雨溪** 发布。  
在国内，vue有着得天独厚的优势，因为它的作者是华人尤雨溪，技术文档相对友好。  
在有HTML，CSS，JavaScript的基础上，可以快速上手。

#### 特点 ####

*  渐进式学习，易于上手。
 *  双向数据绑定。
 *  华人开发者，文档友好。
 *  在国内大/中/小企业中大量应用。
 *  仅限于web开发，但是在其他框架的加持下可以做到全端开发。

#### 套件 ####

*  [vue-router][] `官方路由管理器`
 *  [vuex ][vuex]`状态管理模式`

### 2. react ###

![22c030f7e73442208f4d93af46adab5e.png][]

#### 简介 ####

[React][] 于2013年5月由 **Facebook** 发布。  
React 让创建交互式 UI 变得轻松。为应用程序中的每个状态设计简单的视图，当数据发生变化时，React 将有效地更新和呈现正确的组件。

#### 特点 ####

*  大厂背景，不用担心成熟度和维护稳定性。
 *  上手相对困难，适合大项目。

#### 套件 ####

*  [React Native][] `使用JavaScript开发原生Android和iOS应用`

### 3. angular ###

![985f02f4496f417186bde2e762f77a3c.png][]

#### 简介 ####

[angular][] 于 2010 年 9 月由 **Google** 发布。  
学会用 Angular 构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上： Web、移动 Web、移动应用、原生应用和桌面原生应用。  
相比于vue的轻巧，angular凭借 Typescript 本身比 JavaScript 更加工程化的优势，大型项目中angular会更具优势。

#### 特点 ####

*  大厂背景，不用担心成熟度和维护稳定性。
 *  可以开发Web、移动 Web、移动应用、原生应用和桌面原生应用。
 *  功能比`react`更加丰富，一个是真正的大而全的framework。
 *  上手比较困难，需要完全掌握相关知识，时候大型项目。

### 5. flutter ###

![9419239c76664ccfa2541c2d86c174fe.png][]

#### 简介 ####

Flutter是于2015年由 **谷歌** 开发的开源移动应用软件开发工具包，用于将一套代码打包为原生的Android和iOS开发应用。

#### 特点 ####

*  所见即所得，一边开发一般预览。
 *  一套代码搞定Android和iOS两大平台。

性能表现：无性能问题，同原生性能。

### 6. uni-app ###

![b8f9ab8a61df430ea450e40152f7b461.png][]

#### 简介 ####

[uni-app][] 由DCloud公司开发，DCloud是国内`流应用`行业的开创者。  
是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台。

#### 特点 ####

*  一套代码全端开花，极高的提高开发效率。

性能表现：vue页面性能一般，同web性能；nvue页面性能向原生性能靠近。

#### 套件 ####

*  Nvue `提供基于weex的原生渲染`
 *  5+Runtime `增强版的手机浏览器引擎，使js可以访问原生接口`
 *  unicloud `Serverless 无服务器开发开发框架`
 *  uniMPsdk `让你的APP具备小程序能力`

### 7. electron ###

![e851e9bdf2c84df7ab0be5eb7a203727.png][]

#### 简介 ####

Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。  
其实就是把 V8 引擎单独包装起来，使之成为可以在桌面运行的类浏览器平台，并提供了更多的接口。

#### 特点 ####

*  Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
 *  使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。

### 8. node.js ###

![933ad2c005e0434c94515276e80b79ae.png][]

#### 简介 ####

node.js是一种javascript的运行环境，能够使得javascript脱离浏览器运行。  
我们可以使用它在电脑上跑一个用javascript写的服务程序；达到前端变后端的高级效果。

#### 特点 ####

*  轻量、可伸缩，适于实时数据交互应用
 *  非阻塞I/O
 *  事件驱动
 *  单进程，单线程

## 二、规范 ##

### 1. TypeScript ###

![7671c738e8384d4fa6f93f972e0f98dd.png][]

`TypeScript` 是 `JavaScript` 的超集，是在2012年10月由 **微软** 公司推出的。  
他处理了 JavaScript 的一些问题，语法更加严谨，适合开发 大型项目。

我过一篇TypeScript的入门文章，详见[TypeScript的认识与入门学习][TypeScript]。

### 2. ECMAScript 6 ###

![d0e27e6cf77f4826a4f5a275ce876271.png][]

是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。  
但大家都喜欢叫他 **ES6** 。

我写过一篇ES6的入门文章，详见[JavaScript ES6语法新特性整理，ES6必须掌握的知识点，更强大更方便][JavaScript ES6_ES6]。

### 3. Sass ###

![41c52aa353a843b19b581b9f5b60325d.png][]

专业级CSS扩展语言，可以实现类似脚本方式来编写更加灵活易管理的css代码。

## 三、UI ##

### 1. bootstrap ###

![e5210281a7f34882b2e32a9ca820ab8b.png][]

[Bootstrap][]是著名的社交网站、微博的先驱Twitter在2011年8月推出的开源WEB前端框架，集合CSS和HTML，使用了最新的浏览器技术，为快速WEB开发提供了一套前端工具包，包括布局、网格、表格、按钮、表单、导航、提示等等。使用Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。  
、

### 2. element ui ###

![146eb7a98114441c9c7f84bed2ac0e53.png][]

[Element-UI][]是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI 。

### 3. Vant ###

![9e2bc9ebeb1f47c1b2ba5e016d1695ca.png][]

[Vant][]是基于vue的一款开源的移动端组件库。  
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。

## 四、组件 ##

### 1. echarts ###

![1fb961da5fd64bd8983ddcdef0ba4467.png][]

一个基于 JavaScript 的开源可视化图表库。  
echarts 项目最初是由百度推出的，后捐献给了Apache开源基金维护。

### 2. webuploader ###

![e5d3924964124616a06134c26a387e8f.png][]

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。

## 五、工具 ##

### 1. postman ###

![6b519af3c36e4e048034e2862c9a9273.png][]

最常用的接口测试工具.  
我写了一篇入门的使用方法文章，详见 [使用 Postman 做好接口测试，拒绝相互甩锅][Postman]。

### 2. nginx ###

![d6cfa2c588b0437297496a9c63ee3612.png][]

我写过一篇相关文章，详见 [使用nginx代理实现前后端分离开发调试，零基础教程][nginx]。

### 3. git/svn ###

![3b0b980e0c894d82ae10a3b9d9b76362.png][]

版本管理工具。

我写过一篇相关文章，详见 [版本管理客户端，TortoiseSVN和TortoiseGit][TortoiseSVN_TortoiseGit]。

### 4. Webpack ###

![956899a87395423684046f481e15c6be.png][]

前端打包工具。

### 5. VScode ###

![19207fedf4494868be66e4065a669460.png][]

由微软推出的编辑器，拥有体积轻，扩展性强的特点。  
使用`TypeScript + Electron`开发，是目前最欢迎的IDE之一。

## 六、其他 ##

*  hybrid `及原生和H5混合开发`
 *  canvas `WEB端的画图组件`
 *  Gojs `功能强大的图形库`
 *  WebGL/three.js `WEB端的一种3D渲染`
 *  Serverless `无后端开发，一般直接使用云端数据库和nodejs的环境进行开发，如uniCloud`
 *  axios `promise实现对ajax技术的一种封装`
 *  webassembly `一种可以在浏览器中执行的编程语言，比JavaScript更快`

[1732e1a0b2d0495fb82241d04d019ac5.png]: /images/20220829/2017f567ad7f4555b9463d619cec9fb5.png
[vue]: https://cn.vuejs.org/
[vue-router]: https://router.vuejs.org/zh/
[vuex]: https://vuex.vuejs.org/zh/
[22c030f7e73442208f4d93af46adab5e.png]: /images/20220829/caae213214074fd2af439ba6e701dd80.png
[React]: https://reactjs.org
[React Native]: https://www.react-native.cn/
[985f02f4496f417186bde2e762f77a3c.png]: /images/20220829/af853acaff194901ae7281c7a434e255.png
[angular]: https://angular.cn/
[9419239c76664ccfa2541c2d86c174fe.png]: /images/20220829/51836aa36fb546f9b6f819b8c94b699d.png
[b8f9ab8a61df430ea450e40152f7b461.png]: /images/20220829/50588a4f6b6f4281906149a6d82a0976.png
[uni-app]: https://uniapp.dcloud.io/
[e851e9bdf2c84df7ab0be5eb7a203727.png]: /images/20220829/bd969b781cc34faeab16475473c88e25.png
[933ad2c005e0434c94515276e80b79ae.png]: /images/20220829/5a3c7c5f2a8e47b580b6b276a42aa7f4.png
[7671c738e8384d4fa6f93f972e0f98dd.png]: /images/20220829/477511a36b834e9dae196d59abd24aee.png
[TypeScript]: https://blog.csdn.net/xiaohui_brook/article/details/112843470
[d0e27e6cf77f4826a4f5a275ce876271.png]: /images/20220829/95e3ab8de2294494b656e0ad664da52c.png
[JavaScript ES6_ES6]: https://blog.csdn.net/xiaohui_brook/article/details/108491698
[41c52aa353a843b19b581b9f5b60325d.png]: /images/20220829/ec55c9fc90254e89b2b026c2f60cce46.png
[e5210281a7f34882b2e32a9ca820ab8b.png]: /images/20220829/5bfaa7fac59d4279893af3db0d341129.png
[Bootstrap]: https://www.bootcss.com/
[146eb7a98114441c9c7f84bed2ac0e53.png]: /images/20220829/f3d6c4638aec4921a35dba66388480af.png
[Element-UI]: https://element.eleme.io/
[9e2bc9ebeb1f47c1b2ba5e016d1695ca.png]: /images/20220829/accb4d6488904699a77d7bbd12067637.png
[Vant]: https://youzan.github.io/vant/#/zh-CN
[1fb961da5fd64bd8983ddcdef0ba4467.png]: /images/20220829/bcef7b6712e541fb997cbf3aea2b5088.png
[e5d3924964124616a06134c26a387e8f.png]: /images/20220829/465df2cd317541ce80c34283e7224d71.png
[6b519af3c36e4e048034e2862c9a9273.png]: /images/20220829/efc3f4dcd05b477e98a2be4aaa9b2bb1.png
[Postman]: https://blog.csdn.net/xiaohui_brook/article/details/119600908
[d6cfa2c588b0437297496a9c63ee3612.png]: /images/20220829/629ad2500ec84b3f9d8bab180c51baf6.png
[nginx]: https://blog.csdn.net/xiaohui_brook/article/details/115250516
[3b0b980e0c894d82ae10a3b9d9b76362.png]: /images/20220829/ebbe4e80760d4822b21586d23f91da55.png
[TortoiseSVN_TortoiseGit]: https://blog.csdn.net/xiaohui_brook/article/details/108378962
[956899a87395423684046f481e15c6be.png]: /images/20220829/772ba073f8624bfdb82201281b0f7749.png
[19207fedf4494868be66e4065a669460.png]: /images/20220829/f7b247821a474c8181bc809fd43ead13.png