Vue和React知识谱,前端必备
Vue.js作为目前前端生态最好的前端技术,相关知识点比较多,在掌握Vue前有一个全局认识。React同样是mvvm老大哥,生态方面比较前沿,比如Wasm等。本文总结了Vue.js和React必须的知识谱,其中比如JS基础JSX、Babel等部分是共用的。
Vue.js
JS基础:
准备:
- 项目环境: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、前端主题
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
优秀的开源项目
- 配合 RUST 应用构建工具Tauri
- 极易扩展的无代码开发平台Nocobase
- React BootstrapReact Bootstrap