2022一文彻底搞懂前端那些事

1,405 阅读2分钟

前言

对于前端端开发者来说,东西比较杂乱,总是遇到问题才去学习,显然不符合大裁员下的发展,为此小编专门为大家总结了这篇文章,让你从青铜直接成为网站,真正的从底层逻辑上达到从入门到精通,如果大家觉得有用,记得点赞收藏,优质文章不间断。

认知篇

对于一个前端开发来说,什么Vue、React、Angular、Svelte如何变化,本质都围绕了一个东西,就是如何简单、快速的完成前端页面编写,而浏览器永远只认识HTML\CSS\JAVASCRIPT。

  • 脚手架: 创建项目,选择性安装需要的插件,指定统一的风格,规范项目结构。
  • 构建项目:建立项目的运行环境,需要手动安装插件。
  • 打包代码:代码写好之后,为了更好的使用,需要打包处理一下,比如压缩、混淆等。

常用工具对比列表

脚手架构建项目打包代码
vue-cliviteWebpack
create-vueRollup

工具篇

要解决Vue、React、Angular、Svelte的转化问题,有衍生出了如何转化,这个时候就用到了转化工具,目前所有的转化工具都是基于NodeJS产生的。按照时间罗列如下:

  • Grunt
  • Gulp
  • Webpack
  • Rollup
  • Vite

UI篇

前端的本质工作就是编写页面,如何高质量、高速度的编写页面显得非常重要,这里就需要用到的UI库

电脑端

移动端

小程序

NodeJS

包管理器

  • npm
  • cnpm
  • yarn
  • pnpm

NPM

  • 查看配置
npm config list
  • 永久设置
npm config set registry https://registry.npm.taobao.org
  • 临时设置
npm install @micro-design/cli --registry=http://registry.npm.taobao.org
  • 清楚缓存
npm cache clean --force
  • 常规问题解决方案
npm -g i npm@4
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - http://registry.npm.taobao.org/
  eu ----- http://registry.npmjs.eu/
  au ----- http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj ----- https://registry.nodejitsu.com/

CNPM

安装

npm install cnpm -g --registry=https://registry.npm.taobao.org
 
# 测试是否成功
cnpm -v

下一代工具

服务端渲染