前言
本文尽可能为各大插件、工具、框架等官方文档导航,标注为中文文档参考则为民间有志青年翻译。
学习平台
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://www.runoob.com/html/html-tutorial.html
CSS-Tricks
CSS-Tricks是一个由Coyier创办的CSS学习网站。它提供了大量的CSS教程、技巧和代码实例,适合初学者和进阶者使用。此外,它还有一个社区论坛和博客,让学习者可以和其他开发者交流。
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 平台提供了一个大量的算法练习题库,其中包括了多个类别的算法问题,例如数组、链表、树、字符串、动态规划等等。在这里,用户可以免费练习、在线编程比赛和竞赛、提交和评估自己的算法问题解决能力,同时也可以通过和其他用户的比较,激发自己更好的表现。
技术交流
GitHub
一个非常受欢迎的开源代码托管平台,让开发者可以共享、合作、探索各种开源项目,同时也是一个非常活跃的技术社区。
Stack Overflow
一个专门针对编程问题的问答社区,开发者可以在这里提问、回答问题,并与其他开发者交流和分享经验。
掘金
稀土掘金是一个专注于程序员技术分享和交流的社区平台,致力于帮助开发者互相学习、交流和成长。它提供了丰富的技术博客和文章、开源项目、求职招聘信息等内容,同时也有大量的技术社区和问答平台。
知乎
知乎是一个知识分享社区,也是一个非常受欢迎的技术博客平台。在知乎上,不仅可以阅读大量的技术文章和博客,还可以与其他技术爱好者交流和分享经验,获得专业的技术指导和解决方案。
dev
dev社区和国内的掘金社区很相似,技术分类也比较多,像 Java、Python、js、分布式等应有尽有,文章质量普遍都还不错,其实如果平时多留意不难发现,掘金上有一些文章是翻译自 dev社区。
书读百遍,其意自现
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 文档。
GitHub:https://github.com/vuejs/core
vue开发插件
一个 Vue.js 应用程序的浏览器调试工具,可以在 Chrome 和 Firefox 上使用。
网址:https://devtools.vuejs.org/
vueuse
VueUse是一个基于Vue 3的轻量级、模块化的函数库,提供了一些方便实用的Vue自定义Hooks。这里包含了许多常用的功能,例如状态管理、表单处理、时间处理、剪贴板操作、动画效果、浏览器API等,也支持Tree Shaking,可以根据需求选择所需要的模块,避免浪费不必要的资源和加载时间。
nuxt
Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,用于创建服务端渲染 (SSR) 应用程序。它基于 Vue.js,封装了服务端渲染、异步数据加载、打包优化、静态资源预加载、路由系统等一系列的解决方案和最佳实践,使开发人员可以更快地构建高性能、可扩展的应用程序。
vuepress
VuePress是一个基于Vue.js的静态网站生成器,它能够生成具有文档阅读体验的静态网站。VuePress使用Vue.js的单文件组件和Webpack进行开发,支持Markdown写作格式,并提供了丰富的主题和插件可供选择。
网址:https://vuepress.vuejs.org/zh/
React学习
react
这是学习 React 最好的网站。它包含 React 完整的文档和教程,从基础到高级,涵盖了 React 的方方面面。建议从官网的 learn react 入手,系统学习 React。
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://www.nextjs.cn/docs
Gatsby
Gatsby是一个基于 React 的静态网站生成器,支持使用 Markdown、React 组件、GraphQL 等构建静态网站,可以帮助开发者快速构建 SEO 友好、高性能的静态网站。
中文文档: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 上开发。
微前端
Qiankun
Qiankun是阿里巴巴前端体系基于微前端规范实现的一套解决方案。它提供主应用和微应用两种角色。主应用作为整个项目的入口,微应用负责独立业务场景。微应用可以选择React、Vue或者其他框架开发,并且可以部署在不同域名下。主应用动态加载微应用,微应用之间也可相互嵌套。提供沙箱机制,确保微应用之间的隔离性。提供主应用和微应用之间的通信方案。支持SSR渲染和TypeScript。
网址:https://qiankun.umijs.org/zh
工具
环境配置
node.js
这是Node.js的官方网站,提供了关于Node.js的文档、API参考和下载链接等信息。官网还提供了一个交互式的Node.js教程,帮助初学者了解Node.js的基本概念和语法。
npm
npm是Node.js官方的包管理器,用于帮助Node.js开发人员安装、发布、分享和管理Node.js模块(也称为包或库)。这里提供了npm的文档、包管理器、包搜索和社区等。学习者可以在这里找到各种npm相关的信息和资源,包括如何使用npm安装、发布和管理包等。
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 库,用于处理、解析和显示日期和时间。它提供了丰富的日期和时间处理功能,包括格式化、解析、时区转换、相对时间计算等。
lodash
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
echarts
ECharts 是一个由百度前端开发团队开发的基于 JavaScript 的可视化图表库,支持各种常见图表类型,如折线图、柱状图、散点图、饼图、仪表盘等,可以灵活扩展和定制化,广泛应用于数据可视化和图表展示的场景。
网址:https://echarts.apache.org/zh/index.html
xlsx
sheetjs 提供了excel在前端使用纯js导出的解决方案,在线阅读excel和导出excel工具。
构建工具
webpack
webpack是一个非常强大的JavaScript模块打包工具,可以处理各种类型的文件,支持自定义配置和插件,同时也提供了一些优化功能,如代码压缩、缓存等。
网址:https://webpack.docschina.org/
vite
Vite是一个现代化的构建工具,可以快速构建现代Web应用程序。Vite可以快速启动项目,支持快速热更新、动态导入和静态分析等功能。与传统的打包工具不同,Vite采用原生ES模块作为开发时的模块系统,可以实现按需编译,避免了不必要的打包时间和编译过程。
rollup
rollup是一个专门用于打包JavaScript库的构建工具,支持ES6模块和Tree Shaking等功能。
中文文档:https://www.rollupjs.com/
项目配置
eslint
ESLint 是一个 JavaScript 代码检查工具,用于检测代码中潜在的问题和错误,以保证代码质量和一致性。它可以识别并纠正常见的代码风格问题,如缩进、括号、引号等,还可以检查语法错误、未使用变量、未声明变量、代码重复等问题。
网址:https://eslint.org/docs/latest/use/getting-started
prettier
Prettier 是一个代码格式化工具,可以根据配置自动格式化代码,使代码风格一致,减少开发者在代码格式上的时间和精力投入,从而提高开发效率。
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 更加易读、易维护和易扩展。
sass
sass和scss其实是一样的css预处理语言,SCSS 是 Sass 3 引入新的语法,其后缀名是分别为 .sass和.scss两种。它扩展了CSS,并添加了许多有用的特性,如变量、嵌套规则、Mixin(混合)、函数等。
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测试框架,支持异步和同步测试,并且可以与各种断言库和测试覆盖率工具配合使用。
AVA
AVA是一个轻量级的JavaScript测试框架,支持异步测试和并发执行,具有快速、简单和易于使用的特点。
网址:https://github.com/avajs/ava
三维开发
Three.js
Three.js 是一款基于 WebGL 的 3D 渲染引擎,可以用于制作各种 3D 场景、动画、交互等效果。它提供了丰富的 API 和示例,可用于创建复杂的 3D 网站、游戏、虚拟现实(VR)、增强现实(AR)等应用。
Cesium
cesium是一个开源的 JavaScript 库,用于创建基于 Web 的地球浏览器应用程序。它使用 WebGL 进行硬件加速,并使用大量的开放数据标准,如 WMS、WFS、GeoJSON、KML 等。
Babylon.js
Babylon是一个功能强大的三维引擎,专门用于创建基于 WebGL 的游戏和应用程序,可在浏览器、移动设备和桌面上运行。