Web前端开发

前端可以说是百花齐放，咋说了，各种框架层出不从，你方唱罢我登场甚至同台竞技，不像后端Java的Spring一家独大，后果就是你都得会都得学哈哈哈，算了，无论什么都是学无止境！

前端开发，什么是需要先做的呢？那应该是前端三剑客吧，它们是网页的基本构成要素

  • html（骨架，可以熟悉下Emmet语法支持快速生成骨架）
  • css（样式：超集有sass、less）
  • js（行为：进阶有Typescript、nodejs）
    那么前端代码怎么调试呢？最好的答案就是浏览器了吧，开发者工具调试 是离不开的，因为浏览器是最终呈现效果的地方

之后呢，工程化的项目，如果靠存粹的这三者得写到猴年马月才能写出我们看到的美丽界面呢？
那肯定是需要依靠框架！
不过使用框架之前，框架似乎也挺多？我咋去用呢？那就要说到前端的包管理工具！就像Java的Maven、Python的pip，前端也是有的，而且选择还挺多？！
包括但不限于npm、yarm、pnpm....
深入浅出 npm & yarn & pnpm 包管理机制 - 知乎 (zhihu.com)

image-20240219215500319

但是，其实这些东西都要依赖nodejs，所以先把nodejs先装一装吧，顺便再把npm之类的装上

而且nodejs也有很多版本持续更新迭代，有时候出于项目需求还必须使用特定的版本，这就难办了，所以基于nvm进行安装和管理：nvm管理工具的安装和使用

好了，似乎准备的差不多了，那么接下来就是各大框架了

JQuery、Bootstrap、Angular【几乎无人使用了】这样的老古董就不说了，目前主要是React和Vue

  • React：基于DOM树，没用过不说了
  • Vue：基于视图数据的双向绑定
    • Vue2：选项式，接触过
    • Vue3：组合式
      • setup语法糖的出现，才是真正的Vue3，也是主要学的
      • 最新的技术栈：vite+ts+pinia

各种框架依赖的导入让前端丰富起来也变得复杂了，项目开发完成、编译、打包之后才能部署到服务器，而打包这个过程也是非常重要的，对我们来说最直观的感受就是打包速度，如此一来前端项目也引入了工程化的概念，了解下webpack，不过它挺麻烦的，这也才有了像vite之类的脚手架的出现

单纯的的框架还不足以让我们快速完成开发，那么不得不说那些开源的组件库

组件是有了，但动画呢？也有一些优秀的动画库：推荐10个常用的CSS动画库

甚至还有可视化的UI元素（html、css、js分享），都是纯粹基于html，css、js的可直接复制：4158 UI elements: CSS & Tailwind (uiverse.io)

还有就是极速表单，前台对于这些代码可以快速构建也就是所谓的低代码，甚至是零代码：这几个前端开发利器，相见恨晚！、aisuda

还有些扩展知识（对我个后端来说）， 比如如何封装自己的组件库，又如何高度定制样式，这里不得不说下基于原子css这个神奇东西，比较新的框架：10-unocss使用_哔哩哔哩_bilibili

还有一些要补充的东西：

  • 前端页面面向世界，涉及国际化；
  • 如何提高网站指数SEO在搜索引擎中的比重；
  • 纯前端开发者如何调试，那就是mock数据，有一些框架如Mock.js (mockjs.com)
  • 一些新兴的概念，野心挺大吧，不知道究竟怎么样，比如微前端

微信小程序也属于前端开发的分支，最常见的就是uniapp，
其中，ijry/uview-plus: uview-plus，是uni-app全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。 (github.com)貌似是兼容Vue3的全新框架

附录：

总结100+前端优质库,让你成为前端百事通 - 知乎 (zhihu.com)

Interactive Graph
Table Of Contents
Web前端开发