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

相关文章
|
9月前
|
Web App开发 前端开发 JavaScript
Playwright极速UI自动化实战指南
Playwright告别Selenium痛点,以智能等待、强大选择器、网络拦截与多设备模拟四大利器,提升自动化效率与稳定性。本文通过实战代码详解其加速秘籍,助你构建高效、可靠的UI测试方案。
|
12月前
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
350 4
|
12月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
507 1
|
9月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
531 4
|
8月前
|
人工智能 自然语言处理 JavaScript
Playwright MCP在UI回归测试中的实战:构建AI自主测试智能体
Playwright MCP结合AI智能体,革新UI回归测试:通过自然语言驱动浏览器操作,降低脚本编写门槛,提升测试效率与覆盖范围。借助快照解析、智能定位与Jira等工具集成,实现从需求描述到自动化执行的闭环,推动测试迈向智能化、民主化新阶段。
|
9月前
|
JavaScript 前端开发 开发者
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
鸿蒙开发语言ArkTS在继承了Typescrip语法的基础上,主要扩展了声明式UI开发相关的能力。
390 1
|
9月前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
1479 0
|
11月前
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
878 12
|
12月前
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。
|
10月前
|
传感器 人工智能 JavaScript
Playwright实战:写UI自动化脚本,速度直接起飞
简介: 测试工程师老王因UI自动化问题深夜奋战,反映出传统测试工具的局限性。微软开源的Playwright凭借智能等待、跨域操作、移动端模拟与网络拦截等强大功能,正迅速取代Selenium,成为新一代自动化测试标准。其稳定高效的设计显著降低维护成本,助力企业构建高质量测试流程。

热门文章

最新文章