今天的前端技术是一个复杂的生态。随便看一篇关于前端的技术文章，肯定会发现很多技术术语。什么vue、webpack、react、Antdesign等等，各种各样的新名词让初学者很迷茫，却又能在较短的时间内快速了解整个前端系统，从而陷入低效焦虑的学习状态.什么是前端？在网站技术中，前端就是用户界面，主要通过页面向用户展示内容或数据。同时，用户可以选择自己需要的内容，填写数据到网站进行反馈。前端是相对于后端而言的。前端+后端分工在生活中或者在??人??体组织的分工中是很常见的，比如：电视+机顶盒兵+作战指挥无人便利店+操作系统简而言之就是网站前端主要是通过获取数据，向用户展示数据或将收集到的数据传输到后台的前端技术系统，以网站为例，前端的载体是浏览器Chrome、FireFox等，所以前端-前端技术自始至终都是围绕着浏览器的几种基础技术开发的：HTMLCSSJavaScript/ECMAScript目前流行的前端技术都是对以上基础技术的“高级编程”，围绕界面设计、界面交互和界面提供不同的软件包经验。例如：Vue、React、Bootstrap等框架就是这方面的杰出代表。不管是哪个框架，最终都依赖于以上技术。UI框架UI框架关注的是UI展示的效果，包含了设计理念，因此基于相同UI框架的网站视觉效果看起来非常相似。主流的UI框架有：MaterialDesignAntDesignBootsrapiViewElementJS框架（交互式编程）不同于UI框架，交互式编程侧重于用户交互后的数据展示（收集）。也就是说，当你的前端页面需要根据用户的选择显示不同类型的数据时，就需要交互式编程了。在早期，开发者主要使用原生的JavaScript来实现这种交互。随着技术的演进，为了解决一些常见的问题，诞生了专门用于交互编程的JS封装框架。开发者可以使用这个JS包更方便的开发前端交互。主流的JS框架有：jQueryVue.jsReactAngula.jsEmber.jsMeteorMithrilBackbone.jsHandlebars.js混合框架在网站的实际开发中，仅仅使用某一种框架是不能满足业务的。比如Vue.js虽然可以很好的处理数据交互，但是它本身并不能构造出漂亮的界面。由于在开源世界中总有一些默默无闻的顶级程序员创造着伟大的作品，基于主流的UI和JS框架，一个繁荣的生态已经出现。这些框架相互结合，并引入更多的工具以形成新的框架。.以Vue.js为例，产生了更多的混合框架：bootstrap-vue是Vue.js+BoostrapAntDesignofVue是Vue.js+AntDesignVuetify.js是Vue.js+MaterialDesignNuxt.js是Vue.jsSSR模式增强NativeScript-VueakaVue.js移动开发添加了QuasarakaVue.js+一次编写代码并将其同时部署为网站、移动应用程序和/或ElectronApp辅助技术和一些伟大的技术，它们还没有上升到框架层面，也不是技术核心，但却是前端应用不可或缺的重要组成部分，包括：Node前端引擎NPM前端包安装管理器Webpack前端打包工具Babel主要用于集成ECMAScript2015+版本的代码转换为向后兼容的JavaScript语法说说NodeNode或者Node.js。正如我们前面提到的，浏览器包含一个JavaScript程序的解释器，因此它可以处理JS代码。Node不同于上述任何框架。它应该被称为JavaScript程序的解释器（类似于虚拟机），所以它主要用于在不方便调用浏览器的场景下处理JS代码。节点使用场景包括：调试和搭建总结以上的讲解看似简单明了，但在实际工作中还是需要我们自己去实践和总结，才能掌握基本原理。本文由Websoft9原创，转载请注明出处。创作不易，欢迎讨论，谢谢支持！
