前端开发必备文档

北京蔓云科技 / 150 / 2023-09-26 12:07:29

ChatGPT 可用网址,仅供交流学习使用,如对您有所帮助,请收藏并推荐给需要的朋友。
https://ckai.xyz

前言
本文尽可能为各大插件、工具、框架等官方文档导航,标注为中文文档参考则为民间有志青年翻译。

学习平台
w3school
这是一个免费的在线学习资源,提供HTML的完整教程,包括各种标签和属性的详细介绍,并附有实例演示。

网址:https://www.w3school.com.cn/

MDN Web Docs
这是Mozilla开发的免费学习资源,提供HTML的详细介绍和教程,并包含实例演示和用法示例。

网址:https://developer.mozilla.org/zh-CN/docs/Web/HTML

HTML Dog
这是一个HTML教程和参考网站,提供HTML的基础知识、标签、属性和实例,还包括HTML的最佳实践和CSS样式。

网址:https://www.htmldog.com/guides/html/

HTML.com
这是一个专门为HTML初学者准备的网站,提供HTML的入门教程和实例演示,以及更高级的技巧和用法。

网址:https://html.com/

菜鸟教程
菜鸟教程是一个免费的中文编程学习网站,它的内容丰富、易于理解,非常适合初学者学习使用。

网址:https://www.runoob.com/html/html-tutorial.html

CSS-Tricks
CSS-Tricks是一个由Coyier创办的CSS学习网站。它提供了大量的CSS教程、技巧和代码实例,适合初学者和进阶者使用。此外,它还有一个社区论坛和博客,让学习者可以和其他开发者交流。

网址:https://css-tricks.com/

Coding Fantasy
Coding Fantasy是一个通过游戏的方式,让你迅速学习到flex和grid布局方式,让你在玩游戏的过程学习到知识。

网址:https://codingfantasy.com/games

bilibili
在B站上,有很多优质的前端编程视频,其中包括Web开发入门、HTML、CSS、JavaScript等基础课程,也有Vue.js、React等流行前端框架的教程,以及一些实用的编程技巧和开发工具的介绍。这些视频由许多有经验的前端工程师制作,涵盖了从基础到高级的前端知识和实践内容。

网址:https://search.bilibili.com/all?keyword=前端开发

leetcode
LeetCode 平台提供了一个大量的算法练习题库,其中包括了多个类别的算法问题,例如数组、链表、树、字符串、动态规划等等。在这里,用户可以免费练习、在线编程比赛和竞赛、提交和评估自己的算法问题解决能力,同时也可以通过和其他用户的比较,激发自己更好的表现。

网址:https://leetcode.cn/

技术交流
GitHub
一个非常受欢迎的开源代码托管平台,让开发者可以共享、合作、探索各种开源项目,同时也是一个非常活跃的技术社区。

网址:https://github.com/

Stack Overflow
一个专门针对编程问题的问答社区,开发者可以在这里提问、回答问题,并与其他开发者交流和分享经验。

网址:https://stackoverflow.com/

掘金
稀土掘金是一个专注于程序员技术分享和交流的社区平台,致力于帮助开发者互相学习、交流和成长。它提供了丰富的技术博客和文章、开源项目、求职招聘信息等内容,同时也有大量的技术社区和问答平台。

网址:https://juejin.cn/

知乎
知乎是一个知识分享社区,也是一个非常受欢迎的技术博客平台。在知乎上,不仅可以阅读大量的技术文章和博客,还可以与其他技术爱好者交流和分享经验,获得专业的技术指导和解决方案。

网址:https://www.zhihu.com/

dev
dev社区和国内的掘金社区很相似,技术分类也比较多,像 Java、Python、js、分布式等应有尽有,文章质量普遍都还不错,其实如果平时多留意不难发现,掘金上有一些文章是翻译自 dev社区。

网址:https://dev.to/

书读百遍,其意自现
JS风格指南
这里包含了各种代码的规范风格,不会让你立刻变成一个优秀的工程师,长期奉行他们也并不意味着你能够高枕无忧不再犯错。

千里之行,始于足下。我们需要时常和同行们进行代码评审,不断优化自己的代码。

网址:https://github.com/airbnb/javascript

你不知道的JavaScript
这里讲述了很多你曾经并不在意但是又不可忽略的js小细节,它将带你把js的不同槽点、另类之处,一次性说个明白。

网址:https://github.com/getify/You-Dont-Know-JS

what the f*ck JavaScript
JavaScript 是一个不错的语言。它的语法简单,生态系统也很庞大,最重要的是,它拥有最伟大的社区力量。我们知道,JavaScript 是一个非常有趣的语言,但同时也充满了各种奇怪的行为。这些奇怪的行为有时会搞砸我们的日常工作,有时则会让我们忍俊不禁。

网址:https://github.com/denysdovhan/wtfjs

正确的学习JavaScript
这是一份为 JavaScript 新手准备的指南,同时也包含了可以给高手学习的最佳资料,虽然网站的名字是 the right way,但并不代表是学习 JavaScript 的唯一方法。这里只是将一些顶尖开发者的文章、提醒和技巧收集于此。由于它是由一些非常厉害的网民身上收集而来,故称之为 'the right way'或是最佳做法。

网址:https://github.com/braziljs/js-the-right-way

JavaScript数据结构和算法完全解析
这里包含了多种基于 JavaScript 语法的算法与数据结构。每种算法和数据结构都有自己的README.md,包含相关说明和链接,以便进一步阅读。

网址:https://github.com/trekhleb/javascript-algorithms

优秀开源项目大全
awesome-vite
awesome-vite 是一个收集了 Vite 生态圈相关资源的 GitHub 仓库,包括插件、模板、示例、文章等等。它的目的是为了帮助开发者更好地使用和探索 Vite。这个仓库由社区驱动,大家可以通过 Pull Request 来贡献自己发现的有价值的 Vite 资源,也可以通过 Issues 来反馈问题和建议。

网址:https://github.com/vitejs/awesome-vite

awesome-react
awesome-react是一个收集了 React 相关资源的精选列表,包括工具、组件、学习资源、示例等等。如果你是 React 开发者,这个列表可能对你很有用。该列表包含了一些非常流行和广泛使用的 React 组件和工具,也包含了一些相对较新但很有潜力的项目。

网址:https://github.com/enaqx/awesome-react

awesome-webpack-cn
awesome-webpack-cn 是一个中文版的 Webpack 相关资源列表,收录了很多 Webpack 相关的文章、教程、插件等,方便开发者学习和使用 Webpack。它包含了从入门到深入的 Webpack 相关内容,以及在 Webpack 使用过程中会用到的各种工具和插件。同时,Awesome-Webpack-CN 的内容也在不断更新和完善中。

网址:https://github.com/webpack-china/awesome-webpack-cn

awesome-github-vue
awesome-github-vue 是一个汇集了许多 Vue 相关的优秀开源项目、组件、工具、插件等资源的 GitHub 仓库。该仓库以清晰的分类和详细的介绍,方便开发者查找和使用 Vue 生态中的优秀资源。

网址:https://github.com/opendigg/awesome-github-vue

Javascript
正则
正则表达式是一种表示字符串模式的方法,常用于搜索、替换和匹配文本。它可以用来匹配特定模式的字符串,比如验证邮箱、手机号、身份证号码等。
RegexOne提供了一个互动的教程来学习正则表达式。
regulex是一个超级好用的正则表达式可视化工具。
regex101是一个在线的正则表达式测试平台。

网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide...

ES6
ES6(ECMAScript 6)是 JavaScript 语言的一次重大更新,也称为 ECMAScript 2015。ES6 主要增加了许多新的语法特性,如箭头函数、解构赋值、let 和 const 关键字、模板字符串、类等,同时也增加了许多新的内置函数和方法,如 Promise、Set、Map、Array.from 等。

网址:https://tc39.es/ecma262/    https://es6.ruanyifeng.com/

typescript
TypeScript 中文网是 TypeScript 官方中文文档网站,提供全面的 TypeScript 中文学习资源,包括入门指南、手册、工具、文章、案例等。该网站由社区维护,更新及时、质量高,是学习 TypeScript 的好帮手。

网址:https://www.tslang.cn/docs/handbook/basic-types.html

TS练习题:https://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.md

TS学习:https://00feng00.github.io/typescript-book-chinese/#how-to-co...

vue学习
vue
Vue.js官方文档是学习 Vue.js 的最佳资源之一,提供了全面的 Vue.js 教程和 API 文档。

网址:https://cn.vuejs.org/

GitHub:https://github.com/vuejs/core

vue开发插件
一个 Vue.js 应用程序的浏览器调试工具,可以在 Chrome 和 Firefox 上使用。

网址:https://devtools.vuejs.org/

vueuse
VueUse是一个基于Vue 3的轻量级、模块化的函数库,提供了一些方便实用的Vue自定义Hooks。这里包含了许多常用的功能,例如状态管理、表单处理、时间处理、剪贴板操作、动画效果、浏览器API等,也支持Tree Shaking,可以根据需求选择所需要的模块,避免浪费不必要的资源和加载时间。

网址:https://vueuse.org/

nuxt
Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,用于创建服务端渲染 (SSR) 应用程序。它基于 Vue.js,封装了服务端渲染、异步数据加载、打包优化、静态资源预加载、路由系统等一系列的解决方案和最佳实践,使开发人员可以更快地构建高性能、可扩展的应用程序。

网址:https://www.nuxtjs.cn/

vuepress
VuePress是一个基于Vue.js的静态网站生成器,它能够生成具有文档阅读体验的静态网站。VuePress使用Vue.js的单文件组件和Webpack进行开发,支持Markdown写作格式,并提供了丰富的主题和插件可供选择。

网址:https://vuepress.vuejs.org/zh/

React学习
react
这是学习 React 最好的网站。它包含 React 完整的文档和教程,从基础到高级,涵盖了 React 的方方面面。建议从官网的 learn react 入手,系统学习 React。

网址:https://react.dev/

github:https://github.com/facebook/react

hooks文档:https://legacy.reactjs.org/docs/hooks-intro.html

router:https://reactrouter.com/en/6.14.1/start/overview

react开发插件
这是一个由 Facebook 官方开发的浏览器插件,可以方便地查看 React 组件的层次结构,以及 props 和 state 的值。

网址:https://chrome.google.com/webstore/detail/react-developer-too...

next.js
Next.js是一个基于 React 的服务器端渲染框架,支持自动代码分割、静态页面生成和基于数据的客户端路由等特性,可以帮助开发者快速构建高性能、可扩展的 Web 应用。

网址:https://nextjs.org/docs

中文文档:https://www.nextjs.cn/docs

Gatsby
Gatsby是一个基于 React 的静态网站生成器,支持使用 Markdown、React 组件、GraphQL 等构建静态网站,可以帮助开发者快速构建 SEO 友好、高性能的静态网站。

网址:https://www.gatsbyjs.com/

中文文档:https://www.gatsbyjs.cn/docs/

Ant Design Pro
Ant Design Pro是一个基于 Ant Design 的企业级后台管理系统模板,提供了丰富的组件和模板,可以帮助开发者快速构建高质量的企业级应用。

网址:https://pro.ant.design/zh-CN/docs/introduction/

小程序开发
微信小程序
在该文档中,你可以学习如何开发小程序,包括小程序的基础知识、开发工具的使用、小程序开发的各种组件和接口的使用方法等等。

网址:https://developers.weixin.qq.com/miniprogram/dev/framework/

taro
Taro是由京东·凹凸实验室开发的一款多端统一开发框架,支持编译成微信小程序、百度智能小程序、支付宝小程序、字节跳动小程序、QQ小程序、H5等多个平台的代码。

网址:https://taro-docs.jd.com/docs/

uni-app
uni-app是由DCloud公司开发的一款基于Vue.js开发的多端统一开发框架,支持编译成微信小程序、支付宝小程序、百度智能小程序、QQ小程序、快应用、H5等多个平台的代码。

网址:https://uniapp.dcloud.net.cn/

react Native
React Native是 Facebook 推出的一种跨平台移动应用开发框架,支持使用 JavaScript 和 React 以及其他web技术进行移动应用开发。可以在 Android 和 iOS 上构建本机应用,同时也支持在 web 上开发。

网址:https://reactnative.dev/

微前端
Qiankun
Qiankun是阿里巴巴前端体系基于微前端规范实现的一套解决方案。它提供主应用和微应用两种角色。主应用作为整个项目的入口,微应用负责独立业务场景。微应用可以选择React、Vue或者其他框架开发,并且可以部署在不同域名下。主应用动态加载微应用,微应用之间也可相互嵌套。提供沙箱机制,确保微应用之间的隔离性。提供主应用和微应用之间的通信方案。支持SSR渲染和TypeScript。

网址:https://qiankun.umijs.org/zh

工具
环境配置
node.js
这是Node.js的官方网站,提供了关于Node.js的文档、API参考和下载链接等信息。官网还提供了一个交互式的Node.js教程,帮助初学者了解Node.js的基本概念和语法。

网址:https://nodejs.cn/

npm
npm是Node.js官方的包管理器,用于帮助Node.js开发人员安装、发布、分享和管理Node.js模块(也称为包或库)。这里提供了npm的文档、包管理器、包搜索和社区等。学习者可以在这里找到各种npm相关的信息和资源,包括如何使用npm安装、发布和管理包等。

网址:https://www.npmjs.com/

中文文档:https://www.npmjs.cn/

git
Git 是一个开源的分布式版本控制系统,用于管理软件开发过程中的源代码。它最初由Linus Torvalds在2005年创建,目的是更好地管理Linux内核的开发。Git 可以轻松地管理大型项目,并使多人协作变得更加简单和高效。

网址:https://git-scm.com/book/zh/v2

常用库
axios
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js。它提供了一种简洁、优雅、灵活和易于使用的方式,使得发送 HTTP 请求变得容易。

moment.js
Moment.js 是一个流行的 JavaScript 库,用于处理、解析和显示日期和时间。它提供了丰富的日期和时间处理功能,包括格式化、解析、时区转换、相对时间计算等。

网址:https://momentjs.com/

lodash
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

网址:https://www.lodashjs.com/

echarts
ECharts 是一个由百度前端开发团队开发的基于 JavaScript 的可视化图表库,支持各种常见图表类型,如折线图、柱状图、散点图、饼图、仪表盘等,可以灵活扩展和定制化,广泛应用于数据可视化和图表展示的场景。

网址:https://echarts.apache.org/zh/index.html

xlsx
sheetjs 提供了excel在前端使用纯js导出的解决方案,在线阅读excel和导出excel工具。

网址:https://sheetjs.com/

构建工具
webpack
webpack是一个非常强大的JavaScript模块打包工具,可以处理各种类型的文件,支持自定义配置和插件,同时也提供了一些优化功能,如代码压缩、缓存等。

网址:https://webpack.docschina.org/

vite
Vite是一个现代化的构建工具,可以快速构建现代Web应用程序。Vite可以快速启动项目,支持快速热更新、动态导入和静态分析等功能。与传统的打包工具不同,Vite采用原生ES模块作为开发时的模块系统,可以实现按需编译,避免了不必要的打包时间和编译过程。

网址:https://cn.vitejs.dev/

rollup
rollup是一个专门用于打包JavaScript库的构建工具,支持ES6模块和Tree Shaking等功能。

网址:https://rollupjs.org/

中文文档:https://www.rollupjs.com/

项目配置
eslint
ESLint 是一个 JavaScript 代码检查工具,用于检测代码中潜在的问题和错误,以保证代码质量和一致性。它可以识别并纠正常见的代码风格问题,如缩进、括号、引号等,还可以检查语法错误、未使用变量、未声明变量、代码重复等问题。

网址:https://eslint.org/docs/latest/use/getting-started

prettier
Prettier 是一个代码格式化工具,可以根据配置自动格式化代码,使代码风格一致,减少开发者在代码格式上的时间和精力投入,从而提高开发效率。

网址:https://prettier.io/

style-lint
style-lint 是一款强大的 CSS 代码规范检查工具,它可以帮助开发者保持一致的 CSS 代码风格,提高代码可维护性和可读性。Stylelint 支持配置文件,可以针对不同的项目需求进行定制化设置。

网址:https://stylelint.io/user-guide/get-started/

husky
Husky 是一个 Git hook 工具,可以让开发者在代码提交、推送等 Git 操作前自动执行一些脚本。常见的用途包括在提交代码前自动运行代码检查、格式化代码等操作,从而保证代码的质量和风格一致性。

网址:https://www.breword.com/typicode-husky/#skip-all-hooks-rebase

babel
Babel 是一个 JavaScript 编译器,用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。在使用 Babel 进行开发时,需要进行相应的配置才能使 Babel 正常工作。

网址:https://www.babeljs.cn/docs/

lint-staged
lint-staged是一个在git暂存文件(staged files)上运行代码格式规范的工具。它只校验暂存文件的改动(diff),而不是整个项目。这样可以提高lint效率,并且避免提交未修改的文件产生的lint错误。

网址:https://github.com/okonet/lint-staged#readme

css编译器
less
Less 是一种动态样式语言,是 CSS 的一种扩展,提供了许多 CSS 所没有的功能,如嵌套规则、变量、运算、函数等,使得 CSS 更加易读、易维护和易扩展。

网址:https://lesscss.org/

sass
sass和scss其实是一样的css预处理语言,SCSS 是 Sass 3 引入新的语法,其后缀名是分别为 .sass和.scss两种。它扩展了CSS,并添加了许多有用的特性,如变量、嵌套规则、Mixin(混合)、函数等。

网址:https://sass.bootcss.com/

stylus
Stylus是一种CSS预处理器,Stylus具有类似于Less和Sass的功能,但它的语法更加简洁,并且可以非常容易地与Node.js集成。同时,Stylus还支持实时编译,可以让开发人员更快地调试和开发CSS样式。

网址:https://stylus.bootcss.com/

PostCSS
PostCSS 是一个 CSS 后处理器,它能够解析 CSS 代码并且使用插件来转换 CSS。PostCSS 的插件生态系统非常丰富,可以实现各种 CSS 的转换,例如自动添加浏览器前缀、将 rem 单位转换为 px、压缩 CSS 等等。

网址:https://www.postcss.com.cn/

单元测试
Jest
jest是由Facebook开发的JavaScript测试框架,可用于测试React、Angular和Vue等前端框架。

网址:https://jestjs.io/zh-Hans/docs/getting-started

Mocha
Mocha是一个基于Node.js和浏览器的JavaScript测试框架,支持异步和同步测试,并且可以与各种断言库和测试覆盖率工具配合使用。

网址:https://mochajs.org/

AVA
AVA是一个轻量级的JavaScript测试框架,支持异步测试和并发执行,具有快速、简单和易于使用的特点。

网址:https://github.com/avajs/ava

三维开发
Three.js
Three.js 是一款基于 WebGL 的 3D 渲染引擎,可以用于制作各种 3D 场景、动画、交互等效果。它提供了丰富的 API 和示例,可用于创建复杂的 3D 网站、游戏、虚拟现实(VR)、增强现实(AR)等应用。

网址:https://threejs.org/

Cesium
cesium是一个开源的 JavaScript 库,用于创建基于 Web 的地球浏览器应用程序。它使用 WebGL 进行硬件加速,并使用大量的开放数据标准,如 WMS、WFS、GeoJSON、KML 等。

网址:https://cesium.com/

Babylon.js
Babylon是一个功能强大的三维引擎,专门用于创建基于 WebGL 的游戏和应用程序,可在浏览器、移动设备和桌面上运行。

网址:https://www.babylonjs.com/


作者
北京蔓云科技
许可协议
CC BY 4.0
发布于
2023-09-26
修改于
2024-07-14
Bonnie image
尚未登录