GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → zce → vuejs-3-examples

zce / vuejs-3-examples

Licence: other
Some examples of Vue.js 3.0.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
typescript
32286 projects
CSS
56736 projects

Labels

vuejsvuevue3vitevuejs3composition-apisvue3-demo

Projects that are alternatives of or similar to vuejs-3-examples

Newbee Mall Vue3 App
🔥 🎉Vue3 全家桶 + Vant 搭建大型单页面商城项目，新蜂商城 Vue3 版本，技术栈为 Vue 3.0 + Vue-Router 4.0 + Vuex 4.0 + Vant 3.0。
Stars: ✭ 3,011 (+11480.77%)
Mutual labels:  vue3, vuejs3, vue3-demo
vue3-demo
💡 vue3新特性示例: 响应式API、组合式API、TodoMVC
Stars: ✭ 114 (+338.46%)
Mutual labels:  vue3, vite, vue3-demo
vue-component-lib-starter
A bare-bones example of creating your own Vue component library.
Stars: ✭ 221 (+750%)
Mutual labels:  vue3, vite
win7
Yet another OS preview via web technologies focused on Microsoft Windows 7.
Stars: ✭ 93 (+257.69%)
Mutual labels:  vue3, vite
rustplatz
(Inoffizielle) Website für das Rust-Projekt von Dhalucard, Bonjwa und RocketBeans
Stars: ✭ 15 (-42.31%)
Mutual labels:  vue3, vite
chengpeiquan.com
My personal website. Base on Vite 2.0 and Vue 3.0. If you want to know how to use Vite to develop a project, you can refer to this repository.
Stars: ✭ 43 (+65.38%)
Mutual labels:  vue3, vite
artemis
MateCloud前端代码，基于vue3、vite、pinia、ant-design vue实现的中台系统
Stars: ✭ 129 (+396.15%)
Mutual labels:  vue3, vite
soybean-admin
A fresh and elegant admin template, based on Vue3,Vite3,TypeScript,NaiveUI and UnoCSS [一个基于Vue3、Vite3、TypeScript、NaiveUI 和 UnoCSS的清新优雅的中后台模版]
Stars: ✭ 2,322 (+8830.77%)
Mutual labels:  vue3, vite
Vue3 News
🔥 Find the latest breaking Vue3、Vue CLI 3+ & Vite News. (2021)
Stars: ✭ 2,416 (+9192.31%)
Mutual labels:  vue3, vite
vue-devui-early
Vue3版本的DevUI组件库。本仓库已迁移至：https://github.com/DevCloudFE/vue-devui
Stars: ✭ 39 (+50%)
Mutual labels:  vue3, vite
iro
IRO - Amazing Color Tools. Color Convert HEX, RGB, HSL and CMYK. Color Inspection with Camera.
Stars: ✭ 103 (+296.15%)
Mutual labels:  vue3, vite
preview-pro
Use pro-layout in vitejs. preview https://sendya.github.io/preview-pro/index.html
Stars: ✭ 71 (+173.08%)
Mutual labels:  vue3, vite
vue-next-admin
🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）
Stars: ✭ 1,002 (+3753.85%)
Mutual labels:  vue3, vite
RuoYi-Cloud-Vue3
🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统
Stars: ✭ 295 (+1034.62%)
Mutual labels:  vue3, vite
fastadmin
vue3 + element-plus fast admin scaffold, 基于vue3和ElementPlus的中后台快速应用脚手架
Stars: ✭ 50 (+92.31%)
Mutual labels:  vue3, vite
2019-ncov-vue3-version
新型冠状病毒实时疫情 Vue-Compostion-Api版本 (Vue3 + TypeScript)
Stars: ✭ 55 (+111.54%)
Mutual labels:  vue3, vue3-demo
Admin-Frame-Vue3
基于Vue3 + Element-Plus + Vite 开发的中/后台管理系统
Stars: ✭ 181 (+596.15%)
Mutual labels:  vue3, vite
Newbee Mall
🔥 🎉newbee-mall 项目（新蜂商城）是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统，基于 Spring Boot 2.X 及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。
Stars: ✭ 8,319 (+31896.15%)
Mutual labels:  vue3, vuejs3
app
专门为互联网人打造的题解神器，神器在手，工作不愁
Stars: ✭ 64 (+146.15%)
Mutual labels:  vue3, vite
vue-lite-admin
a lite vue3.0 admin template,there is no typescript and vuex (但注释挺全)
Stars: ✭ 67 (+157.69%)
Mutual labels:  vue3, vite
View All Similar Projects ➔

Vue.js 3.0 tutorials

为什么学习 Vue.js 3.0？

作为前端的主力框架，Vue.js 因为上手成本低的特点，有着很大的市场占有率，很多的公司都在大面积使用 Vue.js 作为主要的技术栈，再往后升级 Vue.js 3.0 只是早晚的事情，而且 Vue.js 3.0 确实有很多突破性的改进（具体的改进和变化我们待会也会详细介绍），所以对于我们前端开发者而言，掌握 Vue.js 3.0 也是一个必要的目标。

Vue.js 3.0 已经发布有一段时间了，而且在此之前也经历过一个很长的测试阶段，所以对于 Vue.js 3.0 我相信大多数「圈内人士」都或多或少的了解了一些。例如：新的 Composition APIs、响应式数据底层实现改由 Proxy 实现、重写了 Virtual DOM、性能上的变化等等。

具体我们开发者能够感知到的变化，我们可以从官方文档中找到一个非常完整详细的介绍，其中绝大多数的变化在我们之前的课程中我也有过详细的介绍。

今天晚上我并不打算一个一个地跟你去过一遍这些新的特性，我是希望能够更多的跟你分享一些我的理解和观点，因为对于已经入行的同学来说，很多时候被困扰的并不用法上的问题，而是设计和原理上的疑惑。

具体来说，我把今天的要分享的内容归纳为以下这几个问题：

  1. Vue.js 3.0 为什么会推出一套全新的 Composition APIs？这套全新的 API 又有哪些明显的优势？
  2. Composition APIs 究竟应该怎样使用才能发挥出它应有的价值？
  3. Vue.js 3.0 目前在实际场景下的使用情况如何？敢不敢现在升级？
  4. 周边生态目前又是什么样的状态？

如果时间允许的情况下，我会：

  1. 剖析一下 Vue.js 3.0 中响应式数据核心的实现原理和源码
  2. 聊一聊 Vue.js 3.0 中的几个实验性的语法糖
  3. 拆解一下 Vue.js 3.0 同期发布的 Vite

不知道这些问题有没有戳中你，如果你也有类似的疑问，一定跟我们一起看下去，彻底搞懂这些问题。

Composition APIs

Composition APIs 的起因

话不多说，首先来看第一个话题：Vue.js 3.0 为什么会推出一套全新的 Composition APIs？

想要彻底理解 Vue.js 3.0 为什么搞一套 Composition APIs，核心你得先能够体会到 Vue.js 中存在的一些「小问题」。（因为一套替代方案的核心价值肯定在于它解决了之前的某种问题）。

大家对 Vue.js 3.0 熟不熟我不好确定，但是大家之前应该都或多或少的用过 Vue.js 2.x，在 Vue.js 2.x 中，框架的规则性或者叫规矩感非常强。

可能这么说不好理解，我举个例子，比如我们在一个页面组件中要呈现一些从服务器端获取的数据，我们需要先在组件的 data 中添加一个成员，往模板上暴露数据，然后要到组件的生命周期钩子函数中添加获取数据的逻辑代码，如果取回来的数据在呈现的时候还需要经过过滤筛选，那我们还需要在组件的 computed 属性中添加对应的计算属性。

整个过程看似很和谐，这也是为什么说 Vue.js 上手非常友好的原因，毕竟这个过程中框架提供了很完善的规则，我们只需要照着文档一步一步来就行。

这里我也准备了一个小案例，....

这里我们要去添加筛选界面上所现实的 Todos 列表的功能。

我们需要先 xxx，再 xxx ...

那大家能意识到这样做存在的问题么？

同一个业务功能相关的代码分散在各个位置，框架的规则是按照技术特性划分，而不是按照业务功能划分

*Options APIs（Classic Usage）

Vue.js 3.0 仍然支持 Vue.js 2.x Options APIs 典型用法！

Composition APIs 的基本用法

Vue.js 3.0 全新引入一套新的 API 调用风格，类函数式编程！

Composition APIs 封装 Hooks

如果只是目前这么去使用 Composition APIs，那只是换汤不换药，没什么意义。。。

单纯的使用 Composition APIs 并没有太明显的优势，Composition APIs 核心的优势在于 Composition（组合）！

hooks 库：https://github.com/u3u/vue-hooks

封装后的 Todos 案例

发挥 Composition APIs 的价值

Composition APIs 的优势总结

  • 逻辑组合，更强大的逻辑抽象能力，同时更好的逻辑复用
  • 没有 this，没烦恼，再也不用纠结 this 上到底有什么了
  • 更好的类型推导能力（TypeScript）
  • 更友好的 Tree-shaking 支持（渐进式体验）
  • 更大的代码压缩空间

Vue.js 3.0 基础设施

基于 Webpack 构建

基于 Vue CLI 构建

基于 Vite 构建

参考： https://github.com/zce/vite-essentials

周边库生态

官方库

社区库

ENCORE 加餐

Reactivity

SFC Sugers

Vite 原理与实践

参考： https://github.com/zce/vite-essentials

Some examples of Vue.js 3.0.

https://github.com/zce/vite-essentials

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].