前言
大家好,我是虚竹,今天给大家分享一下我做前端开发多年,参与过大大小小的产品或项目实战,常常会用到这些私藏干货(前端好轮子)。作为新生代农民工,手上不得不备一些造好的优质前端轮子,为了让工作事半功倍,提升开发效率,高效完成任务,还能获得领导或上司的赏识,非常棒,收藏等会学会加薪。
开发工具 IDE
1、 VS Code
微软推出的免费、功能强大的一款 IDE 编辑器
Visual Studio Code(简称 VS Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。
下载免费版:code.visualstudio.com/download
2、Sublime Text 3
Sublime Text 是一款流行的代码编辑器。Sublime Text 具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API ,Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持 Windows、Linux、Mac OS X 等操作系统。
官网地址:www.sublimetext.com/
下载免费版:www.sublimetext.com/3
3、 WebStorm
WebStorm 是一个适用于 JavaScript 和相关技术的集成开发环境。类似于其他 JetBrains IDE,它也会使您的开发体验更有趣,自动执行常规工作并帮助您轻松处理复杂任务。
官网地址:www.jetbrains.com/zh-cn/webst…
下载试用版:www.jetbrains.com/zh-cn/webst…
准备环境
- 开发环境:Windows 10,Mac OS
必备工具之一:Node.js v10.16.0+
Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具。Node.js 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核)。这使 Node.js 表现得非常出色。
官网地址:nodejs.org/zh-cn/
基础教程:www.runoob.com/nodejs/node…
入门教程:nodejs.cn/learn
必备工具之二:Git
Git 是一个开源的分布式版本控制系统,用以有效、高速的处理从很小到非常大的项目版本管理。
官网地址:git-scm.com/
入门教程:www.runoob.com/git/git-tut…
- 测试/生产环境:CentOS 7/8
必备 web 服务器:nginx v1.20.0+
Nginx(engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器。在高连接并发的情况下,Nginx是Apache服务器不错的替代品。
安装配置:www.runoob.com/linux/nginx…
前端框架
1、Vue(墙裂推荐)
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
官网地址:cn.vuejs.org/
Vue 2.x 入门:cn.vuejs.org/v2/guide/
Vue 3.x 入门:v3.cn.vuejs.org/guide/intro…
Vue 基础教程:www.runoob.com/vue2/vue-tu…
2、React(墙裂推荐)
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
官网地址:react.docschina.org/
入门教程:react.docschina.org/tutorial/tu…
基础教程:www.runoob.com/react/react…
3、Angular(不推荐)
Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。本人不推荐使用 AngularJS,其开发成本与学习难度较高,且 AngularJS 不适合单兵作战
。
官网地址:angular.cn/
入门教程:angular.cn/docs
基础教程:www.runoob.com/angularjs/a…
4、Jquery(历史遗留)
jQuery 是一个高效、精简且功能丰富的 JavaScript 库。它通过一个易于使用、可以跨多种浏览器工作的 API,使HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单。jQuery 结合了多功能性和可扩展性,改变了数百万人编写 JavaScript 的方式。
官网地址:jquery.com/
入门教程:www.runoob.com/jquery/jque…
服务端渲染框架
1、Nuxt.js
Nuxt.js 是一个基于 Vue.js 的通用应用框架,一个用于 Vue.js 开发服务端渲染应用的一站式解决方案。它的优点是将原来几个配置文件要完成的内容,都整合在了一个 nuxt.config.js,封装与扩展性完美的契合。
简单说nuxtjs项目,它其实就是一个 vue 的项目融合一个 node.js server 项目,这里 node 服务有两个作用,第一点是代替浏览器的工作,笼统理解就是在 created 时的请求数据和页面渲染,第二点是当作静态文件服务器,把渲染好的页面返回给用户。
官网地址:nuxtjs.org/
入门教程:www.nuxtjs.cn/guide
2、Next.js
Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。
官网地址:nextjs.org/
入门教程:www.nextjs.cn/
前端自动化工具
1、webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
官网地址:www.webpackjs.com/
2、gulp
Gulp.js 是一个前端构建工具,与 Grunt.js 相比,Gulp.js 无需写一大堆繁杂的配置参数,API 也非常简单,学习起来很容易,而且 Gulp.js 使用的是 nodejs 中 stream 来读取和操作数据,其速度更快。如果你还没有使用过前端构建工具,或者觉得 Grunt.js 太难用的话,那就尝试一下 gulp 吧。
官网地址:www.gulpjs.com.cn/
3、grunt
Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件,几乎任何你所要做的事情都可以用 Grunt 实现。
官网地址:www.gruntjs.net/
基于 Vue UI 组件库
PC端
1、Element 饿了么前端团队开发
2、iView 视图更新科技公司开发
3、Ant Design 阿里蚂蚁金服前端团队开发
移动端
1、Vant 有赞前端团队开发
2、NutUi 京东前端团队开发
基于 React UI 组件库
Ant Design 系列 蚂蚁体验科技团队开发
微信小程序 UI 组件库
1、vant-weapp
Vant Weapp 是一套轻量、可靠的微信小程序 UI 组件库
2、iview-weapp
iView Weapp 是一套高质量的微信小程序 UI 组件库
3、weui
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
响应式框架
Bootstrap 是目前最受欢迎的前端框架。它是基于 HTML、CSS、JAVASCRIPT的集合,它简洁灵活,使得 Web 开发更加快捷。用于开发响应式布局、移动设备优先的 WEB 项目。
后台管理框架
1、vue-element-admin
github 源码地址:github.com/PanJiaChen/…
演示地址:panjiachen.github.io/vue-element…
2、iview-admin
github 源码地址:github.com/iview/iview…
3、d2-admin
github 源码地址:github.com/d2-projects…
演示地址:d2.pub/d2-admin/pr…
4、vue-manage-system
github 源码地址:github.com/lin-xin/vue…
演示地址:[lin-xin.gitee.io/example/wor…](lin-xin.gitee.io/example/wor…)
5、react ant-design pro
github 源码地址:github.com/ant-design/…
常用 JS 函数库
1、lodashjs
2、时间操作
moment
dayjs
timeago.js
3、rx.js 响应式异步编程库,在vue中需引入 vue-rx
vue-rx
常用前端插件
1、工具库函数
js-utils
2、富文本编辑器
ushare-editor
3、轮播插件
swiper
4、数据可视化
- echarts
echarts.apache.org/zh/index.ht…
- vcharts
- G2
- D3
- highcharts
- vueDataV
5、http 请求
axios
6、图片裁切
cropperjs
vue-cropper
7、html 转 canvas 生成图片
html2canvas
8、cookie 操作
js-cookie
9、页面加载进度条
nprogress
10、移动端适配
px 转 rem 或者 vw、vh postcss
11、数字滚动效果
jquery.countup.js
vue-count-to
12、前端加密
crypto-js
13、滚动插件
mescroll.js
better-scroll
14、markdown 文本转 html
marked.js
15、前端生成二维码
qrcodejs
vue-qr
在线生成二维码
16、防止 xss 攻击
js-xss
17、前端多语言切换
i18n-node
vue-i18n
18、移动端 click 点击事件优化
fastclick
19、满屏滚动
fullPage.js
20、上传文件、文件夹、分片、断点
vue-uploader
21、图片懒加载
vue-lazyload
22、复制文本到剪贴板
clipboard.js
vue-clipboard2
23、五级行政区域数据
Administrative-divisions-of-China
24、拖拽
vue-draggable
前端动画库
1、Animate.css
Animate.css 是一个使用 CSS3 的 animation 制作的动画效果的 CSS 集合,里面预设了很多种常用的动画,且使用非常简单。
官网地址:animate.style/
2、Animejs
Anime.js 是一个轻量的JavaScript 动画库, 拥有简单而强大的API。可对 CSS 属性、 SVG、 DOM 和 JavaScript 对象进行动画。
官网地址:www.animejs.cn/
NodeJS 服务框架
- koa2(墙裂推荐)
Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。
中文文档:koa.bootcss.com/
入门教程:www.ruanyifeng.com/blog/2017/0…
- egg(个人喜好)
eggjs 是阿里开源的企业级 Node.js 框架,专注于企业级框架和应用而生,团队架构师和技术负责人可以基于 egg 孕育出适合自己团队的上层业务框架,帮助开发团队和开发人员降低开发和维护成本。
官网地址:eggjs.org/zh-cn/
- express(建议放弃)
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站,它有一套健壮的特性,可用于开发单页、多页和混合Web应用。
入门教程:www.runoob.com/w3cnote/exp…
版本控制工具
1、公司内网 GIT
Gogs 是一款极易搭建的自助 Git 服务,相比于 GitLab 搭建更简单,性能要求更低。
Gogs 项目旨在打造一个以最简便的方式搭建简单、稳定和可扩展的自助 Git 服务。使用 Go 语言开发使得 Gogs 能够通过独立的二进制分发,并且支持 Go 语言支持的 所有平台,包括 Linux、macOS、Windows 以及 ARM 平台。
官网地址:gogs.io/
2、个人外网 GIT
- github
GitHub 是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。
官网地址:github.com/
- gitee
大家都知道国内访问 Github 速度比较慢,很影响我们的使用。如果你希望体验到 Git 飞一般的速度,可以使用国内的 Git 托管服务。
Gitee 提供免费的 Git 仓库,还集成了代码质量检测、项目演示等功能。对于团队协作开发,Gitee 还提供了项目管理、代码托管、文档管理的服务,5人以下小团队免费。
官网地址:gitee.com/
结语
如果对您有一丢丢帮助,希望能给个👍评论收藏三连。大家也可以分享在开发中用到的轮子写在评论区。
另外此文如有写得不妥的地方,欢迎批评指正。愿与各位大虾们一起交流讨论,一起学习一起进步。
关注公众号【懒人码农】,获取更多项目实战经验及各种源码资源。如果你也一样对技术热爱并且为之着迷,欢迎加我微信【lazycode520】,将会邀请你加入我们的前端实战交流群一起创造更多 BUG,一起面向快乐编程~ 🦄