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

• 软件工具

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

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

一.编程软件

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

  1. vscode（全称Visual Studio Code）

    软件截图

  • 优点在于可以在软件内一键下载插件，并且插件种类比较多。
  • 软件启动非常快，下载的安装包也比较小。但是如果安装好多插件，软件自然而然也会占多一点的内存

  1. WebStorm

    软件截图

  1. HBuilder

    软件截图

  • HBuilder是DCloud推出的专为前端打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。
  • 新建项目时会有一些框架的模板，可进行功能演示。在编写代码，使用比较方便。
  • APP或小程序项目，运行时可以扫码或者数据线连接到手机，可进行真机演示。比较适合开发小程序或APP项目。
  1. Sublime Text
    软件截图
  • Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。
  • 最大优点：体积比较小，运行速度快。
  1. DreamWeaver
    软件截图
  • 但是界面有时候和浏览器打开的会有所区别。新手可以使用，做项目不建议使用。
  1. Notepad++
    软件截图

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

  1. Editplus
    软件截图
  1. 微信开发者工具

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

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

二.框架

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

  1. Vue
  • 主要特点学习成本低, 容易上手.
  1. React
  • V-Dom技术的开创者，主流框架中的NO.1。React的贡献都是开创性的，在它基础上，也有很多兼容框架，比如Anu，Nerv。用以解决React在性能或IE兼容性上的问题。
  1. Angular
  • 大而全型的框架，为大型项目所推崇，深度整合Typescript和Rxjs
  • 缺点: Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 web 应用这个更大的关注点，如果不及早确定下来，这将会导致整个项目难以维护，在实际项目中，运行时提供不属于核心框架的技术往往让人觉得不可思议，这大大降低了 TypeScript 对最终开发者的价值。
  1. 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. 数据库

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

四. 前端项目成品分类

  1. PC端

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

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

五.前端常用库

  1. 常用的js库
  • jQuery
    • jQuery仍然是最常用的 JavaScript 库，WordPress，ASP.NET和其他几个框架的创建和分发都依赖于它。它彻底改变了客户端的开发，将 CSS 选择器引入到 DOM 节点检索加链接来应用事件处理程序、动画和Ajax调用。
  1. 常用的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 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

上一篇 2020年7月13日
下一篇 2020年7月13日

相关推荐

首页
软件超市
企服市场
会员中心