Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目

简介: Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目

1. Vue3 中文文档


微信图片_20220513114343.png


先给大家提供 3 个 Vue3 的中文学习网址。


Vue3 中文文档,国内 CDN 加速版

https://vue3js.cn/docs/zh/

Vue3 设计理念

Vue3 设计理念,动机与目的,上手必读。

https://vue3js.cn/vue-composi...

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/in...

Vant 3.0


轻量、可靠的移动端 Vue 组件库。


Vant 是有赞前端团队开源的移动端组件库,于 2016 年开源,已持续维护 4 年时间。

目前 Vant 已完成了对 Vue 3.0 的适配工作,并发布了 Vant 3.0 版本


https://vant-contrib.gitee.io...

Element-plus


微信图片_20220513114430.png


Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

https://element-plus.org/#/zh-CN

element 3


微信图片_20220513114443.png


Element 3,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

https://github.com/hug-sun/el...

4. 实战项目


vue-vben-admin


微信图片_20220513114459.png


基于 ant-design-vue,typescript,vue3.0,vite 实现的 vue3 风格的后台管理系统。

https://github.com/anncwb/vue...

vue-admin-beautiful


微信图片_20220513114513.png


基于 vue3.0 的开源 admin 项目,同时支持电脑,手机,平板,🔥🔥🔥默认分支使用vue3.x+antdv 开发,master 分支使用的是 vue2.x+element 开发。

https://github.com/chuzhixin/...

vue-cli


基于 Vue3.0 Composition Api 快速构建实战项目

https://github.com/Wscats/vue...

movie-trailer


微信图片_20220513114529.png


Vue3 + TypeScript 开发的电影预告片 webAPP,可以查看正在热映与即将上映的电影信息和短片。

https://github.com/lhz960904/...

newbee-mall-vue3-app


微信图片_20220513114546.png


newbee-mall 项目是一套电商系统,包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统,基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。


前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。


https://github.com/newbee-ltd...

vue3-jd-h5


微信图片_20220513114601.png

相关文章
|
1月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
2月前
|
JavaScript 前端开发 开发工具
使用vue3+element-ui plus 快速构建后台管理模板
本文介绍了如何使用Vue 3和Element UI Plus快速构建后台管理模板的步骤,包括安装Vue 3脚手架、Element UI Plus以及如何全局配置Element UI Plus。然后详细讲解了如何使用Element UI Plus构建布局,包括Header组件、Aside组件和HomeView视图的创建和样式调整,以及App.vue和main.css的修改,最后提供了项目的文件结构图和效果展示。
使用vue3+element-ui plus 快速构建后台管理模板
|
2月前
|
JavaScript
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
本文介绍了在Vue 3中使用Element UI Plus的Carousel组件实现跑马灯效果的方法,并分享了在实现过程中遇到的常见问题和解决方案。
vue3 element-ui-plus Carousel 跑马灯 的使用 及 踩坑记录
|
3月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
254 49
|
1月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
125 0
|
3月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
3月前
|
API Android开发
Android项目架构设计问题之选择和使用合适的UI库如何解决
Android项目架构设计问题之选择和使用合适的UI库如何解决
51 0
|
3月前
|
搜索推荐 数据库
最新UI六零导航系统源码 | 多模版全开源
使用PHP+MySql,增加后台管理 多模板选择,支持在后台切换模板 增加常用搜索引擎,如:知乎、哔哩哔哩、在线翻译等(支持自定义) 支持用户提交收录申请,地址:http://域名/apply 部分模板优化和增加部分功能,如返回顶部、获取输入框焦点、时间日期显示等
75 1
|
3月前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
58 0
下一篇
无影云桌面