Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目
大家好，我是你們的 貓哥，一個不喜歡吃魚、又不喜歡喵 的超級貓 ~
關于貓哥，大家可以看看我的年終總結 前端工程師的 2020 年終總結 - 3 年之癢。
前言
貓哥是一個常年混跡在 GitHub 上的貓星人，所以發現了不少好的前端開源項目、常用技巧，在此分享給大家。
公眾號：前端GitHub，專注于挖掘 GitHub 上優秀的前端開源項目，并以專題的形式推薦，每專題大概 10 個好項目，每周會有一到三篇精華文章推送，與時俱進版前端資源教程。
已經推薦了 面試項目、CSS 奇技淫巧項目、代碼規范項目、數據結構與算法項目、JavaScript 奇技淫巧項目、前端必備在線工具 等專題的近 100 個優秀項目了。
平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目
今天給大家推薦的是 Vue3 的源碼中文學習教程、支持的 UI 組件庫、優質實戰項目。
以下為【前端GitHub】的第 16 期精華內容。
1. Vue3 中文文檔
先給大家提供 3 個 Vue3 的中文學習網址。
Vue3 中文文檔，國內 CDN 加速版
https://vue3js.cn/docs/zh/
Vue3 設計理念
Vue3 設計理念，動機與目的，上手必讀。
https://vue3js.cn/vue-composition/
Vue3 相關項目聚合網站
https://vue3js.cn/
2. Vue3 源碼
為什么要學習源碼 ?
1. 閱讀優秀的代碼的目的是讓我們能夠寫出優秀的代碼。
2. 不給自己設限，不要讓你周圍人的技術上限成為你的上限。
其實就跟我們寫作文一樣，你看的高分作文越多，寫出高分作文的概率就越大。
基于現在的程序員工作模式(模塊化開發，只需要拿到需求做自己的部分)，別說看源碼，甚至就連項目里的代碼都懶的去看，我認識的很多程序員就是這樣的，一個項目摸了兩三年，你要問他項目中 webpack 都干了哪些事情，他的回答是不知道，反而趾高氣揚的告訴你，那些他從來都用不上，看了也沒什么用，也看不懂，這里省略內心千字臟文。
閱讀主要目的 是為了幫助我們 積累素材，不要書到用時方恨少，看到美女我們應該能有一萬種詞語去形容，如氣若幽蘭，美艷不可方物，一笑傾城，再笑傾國，世間尤物，而不是簡短的幾個字，我艸，美女!
https://vue3js.cn/start/
3. UI 組件庫
Ant-design-vue
ant-design-vue 是 Ant Design 的 Vue 實現，組件的風格與 Ant Design 保持同步, 目前支持 Vue 3.0 的 2.0.0 測試版 已發布。
https://antdv.com/docs/vue/introduce-cn/
Vant 3.0
輕量、可靠的移動端 Vue 組件庫。
Vant 是有贊前端團隊開源的移動端組件庫，于 2016 年開源，已持續維護 4 年時間。
目前 Vant 已完成了對 Vue 3.0 的適配工作，并發布了 Vant 3.0 ?版本
https://vant-contrib.gitee.io/vant/v3/
Element-plus
Element Plus，一套為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件庫。
https://element-plus.org/#/zh-CN
element 3
Element 3，一套為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件庫。
https://github.com/hug-sun/element3
4. 實戰項目
vue-vben-admin
基于 ant-design-vue，typescript，vue3.0，vite 實現的 vue3 風格的后臺管理系統。
https://github.com/anncwb/vue-vben-admin
vue-admin-beautiful
基于 vue3.0 的開源 admin 項目，同時支持電腦，手機，平板，????????????默認分支使用vue3.x+antdv 開發，master 分支使用的是 vue2.x+element 開發。
https://github.com/chuzhixin/vue-admin-beautiful
vue-cli
基于 Vue3.0 Composition Api 快速構建實戰項目
https://github.com/Wscats/vue-cli
movie-trailer
Vue3 + TypeScript 開發的電影預告片 webAPP，可以查看正在熱映與即將上映的電影信息和短片。
https://github.com/lhz960904/movie-trailer
newbee-mall-vue3-app
newbee-mall 項目是一套電商系統，包括 newbee-mall 商城系統及 newbee-mall-admin 商城后臺管理系統，基于 Spring Boot 2.X 和 Vue 以及相關技術棧開發。
前臺商城系統包含首頁門戶、商品分類、新品上線、首頁輪播、商品推薦、商品搜索、商品展示、購物車、訂單結算、訂單流程、個人訂單管理、會員中心、幫助中心等模塊。后臺管理系統包含數據面板、輪播圖管理、商品管理、訂單管理、會員管理、分類管理、設置等模塊。
https://github.com/newbee-ltd/newbee-mall-vue3-app
vue3-jd-h5
???? 基于 vue3.0.0 ，vant3.0.0，vue-router4.0.0-0, vuex^4.0.0-0,vue-cli3，mockjs，仿京東淘寶的，移動端 H5 電商平臺！
https://github.com/GitHubGanKai/vue3-jd-h5
最后
關于貓哥，大家可以看看 前端工程師的 2020 年終總結 - 3 年之癢，看看貓哥的臉都被打歪的 ????。
不知不覺，已經寫到第 16 期了呢，已經分享超過 200 個好的前端項目了呢，往期精文請看下方寶藏倉庫，點擊很危險，請慎入！
https://github.com/FrontEndGitHub/FrontEndGitHub
平時如何發現好的開源項目，可以看看這篇文章：如何在 GitHub 上發現優秀開源項目 和 如何使用 GitHub 進行精準搜索的神仙技巧。
覺得有用 ？喜歡就收藏，順便點個贊吧，你的支持是超級貓最大的鼓勵！
可以加超級貓的 WX：CB834301747 ，一起閑聊前端。
微信搜 “前端GitHub”，回復 “電子書” 即可以獲得 160 本前端精華書籍哦。
往期精文
推薦 12 個學習前端必備的神仙級工具類項目與網站
10 個 GitHub 上超火的前端面試項目，打造自己的加薪寶庫！
12 個 GitHub 上超火的 JavaScript 奇技淫巧項目
10 個 GitHub 上超火的 CSS 技巧項目，找到寫 CSS 的靈感！
11 個超火的前端必備在線工具，終于有時間上班摸魚了
總結
以上是生活随笔為你收集整理的Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 推荐 7 个学习 TypeScript
- 下一篇： html5倒计时秒杀怎么做,vue 设