前端项目中所使用的软件、插件、技术和框架以及一些组件库

前端项目中所使用的软件、技术和框架

背景: 技术在不停地更新, 同步的软件框架什么的也一直在更新. 看到好多新手刚学前端时不知道使用那些软件和一些框架, 不知道在哪里找资源. 刚好趁这个机会写一篇文章分享一下资源. 最开始也写过类似的文章, 感觉写的不全面, 这篇当做一个补充吧.

一.编程软件

前端的编程软件挺多的, vscode、WebStorm、HBuilder、Sublime Text、DreamWeaver、Notepad++、微信开发者工具、Editplus和强大的记事本等。针对这几个软件做下介绍。排名不分先后。

1. vscode（全称Visual Studio Code）

   软件截图

• Visual Studio Code是一个轻量级但功能强大的源代码编辑器。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C ++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。
• 优点在于可以在软件内一键下载插件，并且插件种类比较多。
• 软件启动非常快，下载的安装包也比较小。但是如果安装好多插件，软件自然而然也会占多一点的内存

2. WebStorm

   软件截图

• WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

3. HBuilder

   软件截图

• HBuilder是DCloud推出的专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。
• 新建项目时会有一些框架的模板，可进行功能演示。在编写代码，使用比较方便。
• APP或小程序项目，运行时可以扫码或者数据线连接到手机，可进行真机演示。比较适合开发小程序或APP项目。

4. Sublime Text
   软件截图

• Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。
• 最大优点：体积比较小，运行速度快。

5. DreamWeaver
   软件截图

• Dreamweaver是由Macromedia公司开发的一款所见即所得的网页编辑器。所见即所得的网页编辑器的优点有直观性、使用方便、容易上手。它使用所见即所得的接口，亦有HTML编辑的功能。熟练掌握Dreamweaver软件的使用，无论是设计师还是工程师，它都能有效提高你的工作效率。
• 但是界面有时候和浏览器打开的会有所区别。新手可以使用，做项目不建议使用。

6. Notepad++
   软件截图

• Notepad++是Windows操作系统下的一套文本编辑器(软件版权许可证: GPL)，有完整的中文化接口及支持多国语言编写的功能(UTF8技术)。

• Notepad++功能比 Windows 中的 Notepad(记事本)强大，除了可以用来制作一般的纯文字说明文件，也十分适合编写计算机程序代码。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。

7. Editplus
   软件截图

• EditPlus是一款由韩国 Sangil Kim （ES-Computing）出品的小巧但是功能强大的可处理文本、HTML和程序语言的Windows编辑器，你甚至可以通过设置用户工具将其作为C,Java,Php等等语言的一个简单的IDE。

• EditPlus（文字编辑器）汉化版是一套功能强大，可取代记事本的文字编辑器，拥有无限制的撤消与重做、英文拼字检查、自动换行、列数标记、搜寻取代、同时编辑多文件、全屏幕浏览功能。

• 而它还有一个好用的功能，就是它有监视剪贴板的功能，同步于剪贴板可自动粘贴进 EditPlus 的窗口中省去粘贴的步骤。另外它也是一个非常好用的HTML编辑器，它除了支持颜色标记、HTML 标记，同时支持C、C++、Perl、Java，另外，它还内建完整的HTML & CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装IE3.0 以上版本，它还会结合IE浏览器于 EditPlus 窗口中，让你可以直接预览编辑好的网页（若没安装IE，也可指定浏览器路径）。

8. 微信开发者工具

• 微信开发者工具是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南，全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。

• 启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号

9. 记事本

• 记事本除了记录一下文字之外还能用来编写代码，但是用记事本写代码不会有任何提示。所以用记事本写代码，基本功要扎实，思维比较细致。

二.框架

目前相对比较流行的三大框架：Vue、React和Angular。JQuery不是框架。

1. Vue

• Vue的创作者是尤雨溪, 在中国拥有大量的使用者, 也有很多配套的开源项目. 中文文档也很详细.
• 主要特点学习成本低, 容易上手.

2. React

• V-Dom技术的开创者，主流框架中的NO.1。React的贡献都是开创性的，在它基础上，也有很多兼容框架，比如Anu，Nerv。用以解决React在性能或IE兼容性上的问题。

3. Angular

• 大而全型的框架，为大型项目所推崇，深度整合Typescript和Rxjs
• 缺点: Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 web 应用这个更大的关注点，如果不及早确定下来，这将会导致整个项目难以维护，在实际项目中，运行时提供不属于核心框架的技术往往让人觉得不可思议，这大大降低了 TypeScript 对最终开发者的价值。

4. uniapp

• 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

三. 前端开发所需要的技术

1. html-超文本标记语言

   HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

2. css-层叠样式表

   层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

3. JavaScript-脚本语言

   JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

4. jQuery-JS库

   jQuery是一个快捷、简洁的JavaScript库。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

5. Ajax

   Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术

6. node.js

   Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！

   Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使 Node.js 表现得非常出色。

7. 数据库

   数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合

四. 前端项目成品分类

前端的项目分类依据使用场景分为四类: PC端、小程序、APP和微信公众号

1. PC端

做PC端的项目一般都是比较完整的项目，大多使用上边介绍的主流框架。

2. 小程序

• 小程序分为微信小程序、QQ小程序、支付宝小程序和百度小程序等。小程序的使用场景还是挺多的。最大的特点，不需要安装，用完即走，比较方便。
• 小程序和APP的编写软件可以使用HBuilder配合uni-app框架，可以实现一套代码在多个平台发布。
• 微信小程序开发可以使用微信开发者工具编写，编写时可参考微信开发文档。

五.前端常用库

1. 常用的js库

• jQuery
  • jQuery仍然是最常用的 JavaScript 库，WordPress，ASP.NET和其他几个框架的创建和分发都依赖于它。它彻底改变了客户端的开发，将 CSS 选择器引入到 DOM 节点检索加链接来应用事件处理程序、动画和Ajax调用。

2. 常用的UI库

• ElementUI
  • 这款由饿了么前端开源的UI框架，一经面世，就收获了大量程序员的芳心。
• vant UI
  • Vant Weapp是有赞移动端组件库Vant的小程序版本，助力开发者快速搭建小程序应用。
• Flutter
  • Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。
• Mint UI
  • 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库
• WeUI
  • WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
• iView UI
  • 一套基于 Vue.js 的高质量UI 组件库，主要服务于 PC 界面的中后台产品，过去的两年里，iView 开源项目已经帮助成千上万的开发者快速完成网站开发，大幅度提高了开发效率，成为 Vue.js 生态里重要的一部分。
• layui
  • 经典模块化前端框架由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案 ，在年度最受欢迎的框架排名榜上也是前三名的。

六. 较好的练手项目

1. ele
2. awesome-github-vue整理并维护的Vue相关开源项目库集合

七. 比较好的资源

1. vue-element-admin是一个后台前端解决方案，它基于 vue和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型