https://github.com/jcodelife/mind-map

🖼个人思维导图笔记，已整理JS、TS、Vue、React ... 持续更新中，欢迎 PR 和 Start~
https://github.com/jcodelife/mind-map

css js ts vue

Last synced: 3 days ago
JSON representation

🖼个人思维导图笔记，已整理JS、TS、Vue、React ... 持续更新中，欢迎 PR 和 Start~

• Host: GitHub
• URL: https://github.com/jcodelife/mind-map
• Owner: jCodeLife
• Created: 2021-07-05T07:54:01.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-04-21T09:56:48.000Z (about 3 years ago)
• Last Synced: 2025-05-15T12:04:48.032Z (3 days ago)
• Topics: css, js, ts, vue
• Homepage:
• Size: 98.3 MB
• Stars: 1,883
• Watchers: 46
• Forks: 1,060
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### 简介

`mind-map` 是个人学习路上的一些小结

当前进度： 

`5/85`

已完成：

[![](https://img.shields.io/badge/ES6-29张-1989fa)](https://github.com/jCodeLife/mind-map/tree/master/ES6)

[![](https://img.shields.io/badge/TS-27张-ff976a)](https://github.com/jCodeLife/mind-map/tree/master/TS)

[![](https://img.shields.io/badge/Vue-101张-ed6a0c)](https://github.com/jCodeLife/mind-map/tree/master/Vue)

[![](https://img.shields.io/badge/Vue3-50张-07c160)](https://github.com/jCodeLife/mind-map/tree/master/Vue3%E6%96%B0%E6%96%87%E6%A1%A3)

[![](https://img.shields.io/badge/React-86张-ffd01e)](https://github.com/jCodeLife/mind-map/tree/master/React)

如何查阅：

1. 点击 `Github` 右上角的 `Fork` 按钮，将仓库 `Fork` 到个人空间

2. 将个人空间中项目 `Clone` 到本地即可查阅

### 更多待办项

标志说明：

- 🔥 表示重要章节

- ⭐️ 表示必学项

- 🉑 表示可选项(类似技术多选一)

- ✅ 已办项（已整理过的）

- 🚫 表示待办项 （未整理的）

- ⏳ 表示有空就学

0. Internet 🔥

- Internet ⭐️🚫

- HTTP ⭐️🚫

- Browsers ⭐️🚫

- DNS ⭐️🚫 

- Domain Name ⭐️🚫

- Web hosting ⭐️🚫

1. HTML 🔥

- 基础 ⭐️🚫

- 写静态页面 ⏳🚫

- 表单和验证 ⭐️🚫

- 最佳实践 ⭐️🚫

- Web accessibility ⏳🚫

- SEO 基础 ⏳🚫

2. CSS 🔥

- 基础 ⭐️🚫

- 布局 ⭐️🚫

- 响应式设计和媒体查询 ⭐️🚫

3. JavaScript🔥

- JS 基础 ⭐️🚫

- DOM 操作 ⭐️🚫

- Ajax、Fetch ⭐️🚫

- [ES 6](https://github.com/jCodeLife/mind-map/tree/master/ES6(29%E5%BC%A0%E5%9B%BE)) 29张 ⭐️✅

- 进一步了解提升、事件冒泡、作用域、原型、影子DOM、严格模式、浏览器如何运作、DNS、HTTP等概念 ⭐️🚫

4. 版本控制系统 🔥

- Git ⭐️🚫

- GitHub ⭐️🚫

5. Web 安全知识 ⏳

- HTTPS🚫

- Content Security Policy🚫

- CORS🚫

- OWASP Security Risks  🚫

6. 包管理工具 🔥

- npm ⭐️🚫

- Yarn ⭐️🚫

7. CSS 体系结构 ⏳

- BEM🚫

8. CSS 预处理器 ⏳

- Sass🚫

- PostCSS🚫

9. 构建工具 🔥

- 9.1 任务执行器 

    - npm Scripts ⭐️🚫

- 9.2 模块打包器

    - Webpack ⭐️🚫

    - esbuild ⭐️🚫

    - Rollup 🉑🚫 

    - Parcel 🉑🚫

    - Vite 🉑🚫

- 9.3 Lint工具和格式化工具

    - ESLint ⏳🚫

    - Prettier ⏳🚫

10. 前端框架 🔥

- 10.1 React ⭐️

    - [React基础](https://github.com/jCodeLife/mind-map/tree/master/React) 86张✅

    - Redux ⭐️🚫

    - MobX 🉑🚫

    - Recoil 🉑🚫

- 10.2 Vue ⭐️

    - Vue 基础✅

        - [Vue](https://github.com/jCodeLife/mind-map/tree/master/Vue(101%E5%BC%A0%E5%9B%BE)) 101张✅

        - [Vue 3 新](https://github.com/jCodeLife/mind-map/tree/master/Vue3%E6%96%B0%E6%96%87%E6%A1%A3) 50张✅

    - Vuex🚫

- 10.3 Angular 🉑

    - RxJS🚫

    - NgRx🚫

11. 现代 css 🔥

- Styled-components ⭐️🚫

- CSS Modules ⭐️🚫

- Styled JSX 🉑🚫

- Emotion 🉑🚫

12. Web components ⏳

- HTML Templates🚫

- Custom elements🚫

- Shadow dom🚫

13. CSS 框架 🉑

- 13.1 CSS in JS

    - Tailwind CSS 🉑🚫

    - Chakra UI 🉑🚫

    - Material UI 🉑🚫

    - Radix UI 🉑🚫

- 13.2 CSS 框架（无JS）

    - Bootstrap 🉑🚫

    - Bulma 🉑🚫

14. 测试 🔥

- Jest ⭐️🚫

- React Testing Library ⭐️🚫

- Cypress ⭐️🚫

- Enzyme ⭐️🚫

15. 类型检查 🔥

- TypeScript ⭐️✅

    - [TS](https://github.com/jCodeLife/mind-map/tree/master/TS%EF%BC%8827%E5%BC%A0%E5%9B%BE%EF%BC%89) 27张 ✅

- Flow ⏳🚫

16. PWAs ⏳

17. 服务端渲染 SSR ⏳

- Next.js 🉑🚫

- Nuxt.js 🉑🚫

- Universal 🉑🚫

18. Graphql ⏳

- Apollo ⭐️🚫

- Relay Modern 🉑🚫

19. 静态网站生成器 ⏳

- Next.js ⭐️🚫

- Gatsby ⭐️🚫

- Nuxt js 🉑🚫

- Vuepress 🉑🚫

- Jekyll 🉑🚫

- Hugo 🉑🚫

- Gridsome 🉑🚫

- Eleventy 🉑🚫

20. 移动应用 ⏳

- React Native ⭐️🚫

- NativeScript 🉑🚫

- Flutter 🉑🚫

- Ionic 🉑🚫

21. 桌面应用 ⏳

- Electron ⭐️🚫

22. WebAssembly ⏳

### 最后

Keep Learning...