前言
对于前端端开发者来说,东西比较杂乱,总是遇到问题才去学习,显然不符合大裁员下的发展,为此小编专门为大家总结了这篇文章,让你从青铜直接成为网站,真正的从底层逻辑上达到从入门到精通,如果大家觉得有用,记得点赞收藏,优质文章不间断。
认知篇
对于一个前端开发来说,什么Vue、React、Angular、Svelte如何变化,本质都围绕了一个东西,就是如何简单、快速的完成前端页面编写,而浏览器永远只认识HTML\CSS\JAVASCRIPT。
- 脚手架: 创建项目,选择性安装需要的插件,指定统一的风格,规范项目结构。
- 构建项目:建立项目的运行环境,需要手动安装插件。
- 打包代码:代码写好之后,为了更好的使用,需要打包处理一下,比如压缩、混淆等。
常用工具对比列表
脚手架 | 构建项目 | 打包代码 |
---|---|---|
vue-cli | vite | Webpack |
create-vue | Rollup |
工具篇
要解决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
- 常用镜像源
- 开源镜像: npmmirror.com/mirrors/
- Node.js 镜像: npmmirror.com/mirrors/nod…
- alinode 镜像: npmmirror.com/mirrors/ali…
- ChromeDriver 镜像: npmmirror.com/mirrors/chr…
- OperaDriver 镜像: npmmirror.com/mirrors/ope…
- Selenium 镜像: npmmirror.com/mirrors/sel…
- electron 镜像: npmmirror.com/mirrors/ele…
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