Vue和React知识谱，前端必备

Vue.js作为目前前端生态最好的前端技术，相关知识点比较多，在掌握Vue前有一个全局认识。React同样是mvvm老大哥，生态方面比较前沿，比如Wasm等。本文总结了Vue.js和React必须的知识谱，其中比如JS基础JSX、Babel等部分是共用的。

Vue.js

JS基础：

• Typescript：JS教程
• Vue3中文文档：Vue.js V3
• 代码在线编辑：CodePen

准备：

• 项目环境：npm、 Vite、yarn、
• 依赖：webpack、babel、eslint、
• VSCode安装Volar、ESLint插件
• 谷歌浏览器安装 VUE Devtools

1、模板语法

Mustache、v-once、v-bind、v-if、v-on、v-show、v-for等

2、组件

生命周期、props、setup、provide、inject、mixin、插槽、

3、生态

• Vue Router
• Pinia 代替 Vuex
• vite，代替 Vue CLI
• Nuxt.js SSR服务端渲染
• axios

4、前端主题

• Element Plus
• Bootstrap 5
• Ant Design of Vue
• Naive UI

Github代码实践

• vue-admin-better，后台模板：https://github.com/chuzhixin/vue-admin-better
• Blog：各知识点（Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus）：https://github.com/biaochenxuying/blog-vue-typescript
• Vuepress：https://github.com/vuepress/vuepress-next

Vue 在线演示编译结果

Vue3: https://vue-next-template-explorer.netlify.app/ Vue2: https://vue-template-explorer.netlify.app/

React

准备

• VSCode安装ES7+ React/Redux/React-Native snippets插件
• 谷歌浏览器安装 react-devtools

文档

• React文档 文档
• 掘金 6张脑图，一口气看完 React

生态

• 状态管理：Redux
• Remix:Remix
• Tailwindcss:Tailwindcss
• 路由:react-router
• 服务端渲染：Next.js
• SSG：Gatsby
• UI：Ant Design

主题

• 开箱即用的中台前端Ant Design Pro
• AntD Admin
• shadcn/ui

优秀的开源项目

• 配合 RUST 应用构建工具Tauri
• 极易扩展的无代码开发平台Nocobase
• React BootstrapReact Bootstrap