vue3 / vue3-news Goto Github PK

View Code? Open in Web Editor NEW

2.9K 137.0 378.0 7.54 MB

🔥 Find the latest breaking Vue3、Vue CLI 3+ & Vite News. (2021/2022/2023)

Home Page: https://vue3.github.io/vue3-News/

License: MIT License

vue3 vue-router vue-components weekly news vue vue-cli typescript vue-composition-api vue-mastery

vue3-news's People

Contributors

Stargazers

Watchers

Forkers

bluemughtml5 imengli05 linglingyun10 mo2838351973 pl-fe yifan-blog liumingnian hhy5277 go-meteor chengyuzhang xpheqiang limingzhiguang a950623me huangzhiyang166 dengxiaofeng wanjunsun wyfkelly suda-97 pinghe zhaoxuesong0526 jingjing09 zyycjjj kelvin4869 lvtao-lita firstblood93 niceyrc wangzhonggui sirros supremefang meimenglog xsxiaosa sacter shawn-s-feng-nj hyuankun2017 febobo xpuliapushi jeffdgp ranfeng2016 whp1991 zxbe mr-cooler legend-li erictop3 heyanpeng zy499 txier marcduyukun dyingtosurvive fuweiwork forevercyqn ruixue0702 chendss laijinzhitianyan zmgall jeffycai constren lizjiang tchigher louzhuchen keaichong chengeping windtone crazybay gxuebin guanyuhao wohaofang niuxinlucky clancytom huchungun jay6697117 junmoxiaozzz jgteng xunzhaotech gertyxs zuileguangyin rfangjiayou liruidong1 ilove523 captainlintong jackchen1986sh aoyinke zcc888 lemon-cai aaronwn arronking93 assoft sfq1110660201 tx77 wustxing laihaojing vensen002 zbage caiwenglong albertehome martinadamsdev tang-junjie bobchen554 tostack webzmj530 wwk123

vue3-news's Issues

【2020TS】WHY using TypeScript开发？？？

注释的妙用

我们可以通过/** */来注释TypeScript的类型，当我们在使用相关类型的时候就会有注释的提示，这个技巧在多人协作开发的时候十分有用

type returnType = ReturnType<typeof add>

巧用元组

有时候我们可能需要批量的来获取参数，并且每一个参数的类型还不一样，我们可以声明一个元组如：

function query(...args:[string, number, boolean]){
  const d: string = args[0];
  const n: number = args[1];
  const b: boolean = args[2];
}

巧用Omit

interface User {
    username: string
    id: number
    token: string
    avatar: string
    role: string
}
type UserWithoutToken = Omit<User, 'token'>

运用Record

我们忘记写了一个汽车品牌，他会报错吗？
我们拼写属性名错误了，它会报错吗？
我们添加了一个非上述三个品牌的品牌进去，他会报错吗？
我们更改了其中一个品牌的名字，他会有报错提醒吗？
上述这种写法统统不会，这就需要Record的帮助。

type Car = 'Audi' | 'BMW' | 'MercedesBenz'
type CarList = Record<Car, {age: number}>

const cars: CarList = {
    Audi: { age: 119 },
    BMW: { age: 113 },
    MercedesBenz: { age: 133 },
}

巧用类型约束

在 .jsx 文件里，泛型可能会被当做 jsx 标签

const toArray = <T>(element: T) => [element]; // Error in .jsx file.

加 extends 可破

const toArray = <T extends {}>(element: T) => [element]; // No errors.

交叉类型
联合类型
类型别名

出自：Vue3.0之前你必须知道的TypeScript实战技巧

查看更多

夜月一帘幽梦，春风十里柔情

介绍 Vue.js 以及 Vue-next 源码分析文章，希望通过学习Vue.js源码获得更好的知识和收获。

vue-next 源码机制

雨里鸡鸣一两家，竹溪村路板桥斜。—— 王建写的《雨过山村》

vue 源码，高度关注

继续前进

作者有没有兴趣互相加个友情链接

https://github.com/chuzhixin/vue-admin-beautiful

学习vue3

快速上手
有哪些API？和vue2不一样的地方
快在哪里，我们如何得知
大部分基于vue2的第三方组件库面临着升级
源码和周边知识点、生态社区

Can you publish your articles?

I read your article and deeply touched me. You can publish as a little booklet. 👍

Is JavaScript 的超集。

TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。
TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

始于JavaScript，归于JavaScript

TypeScript从今天数以百万计的JavaScript开发者所熟悉的语法和语义开始。使用现有的JavaScript代码，包括流行的JavaScript库，并从JavaScript代码中调用TypeScript代码。

TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。

强大的工具构建大型应用程序

类型允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有JavaScript库的行为。

先进的 JavaScript

TypeScript提供最新的和不断发展的JavaScript特性，包括那些来自2015年的ECMAScript和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件。

这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的ECMAScript3（或更新版本）的JavaScript。

收集前端优化指南

看看哪些适合你，又有哪些可以参考的。

吾观自古贤达人，功成不退皆殒身

东风不与周郎便，铜雀春深锁二乔

我寄愁心与明月，随风直到夜郎西

故人西辞黄鹤楼，烟花三月下扬州

金樽清酒斗十千，玉盘珍羞直万钱

Element UI 升级 Vue 3.0 描述可能有误

Element UI 的官方 Vue 3.0 升级版应该是这个 Element Plus 仓库 https://github.com/element-plus/element-plus，我看目前进度已经升级的差不多完成了。

而 Readme 里面写的 kkb 那个据我所知只是一个培训班的作品，看issue 整个项目还在很初期，让他们的学生认领，至于里面为啥有500多个贡献者只是因为似乎他把老仓库直接复制过来了，容易给人误导

I found this on NewsBreak: Infant shot, 2 adults dead in house shooting

【v3.0.0 One Piece】One Piece. Vuejs 3.0 正式版发布！代号：海贼王

Vuejs 3.0 在北京时间2020年9月 19 日凌晨，终于发布了 3.0 版本，代号：One Piece

以下为 Vuejs Release 3.0 机器翻译文章，原文 v3.0.0 One Piece。

Vue 3.0 发布

今天，我们很荣幸地宣布 Vue.js 3.0“One Piece”的正式发布。这个框架的新的主要版本提供了改进的性能、更小的捆绑大小、更好的 TypeScript 集成、用于处理大规模用例的新 API，以及为框架未来的长期迭代奠定了坚实的基础。

3.0 版本代表了两年多的开发努力，包括 30+ RFC，2600 多个提交，99 个贡献者的 628 个 PR，以及核心仓库之外的大量开发和文档工作。在此，我们要对我们的团队成员、贡献者的拉取请求、赞助商和支持者的资金支持，以及更广泛的社区参与我们的设计讨论并为预发布版本提供反馈表示最深切的感谢。Vue 是一个独立的项目，是为社区而创建的，也是由社区来维持的，如果没有您的一贯支持，Vue 3.0 是不可能实现的。

进一步推进“渐进式框架”概念。

Vue 从一开始就有一个简单的使命：成为一个任何人都能快速学会的平易近人的框架。随着我们用户群的增长，框架的范围也在不断扩大，以适应不断增长的需求。随着时间的推移，它演变成了我们所说的“渐进式框架”：一个可以逐步学习和采用的框架，同时随着用户应对越来越多的需求场景而提供持续的支持。

今天，我们在全球拥有 130 多万用户 *，我们看到 Vue 被应用于各种不同的场景，从在传统的服务器渲染的页面上添加交互性，到拥有数百个组件的完整的单页应用。Vue 3 将这种灵活性进一步提升。

分层内部模块

Vue 3.0 核心仍然可以通过一个简单的 <script> 标签来使用，但它的内部结构已经被重新编写成一个解耦模块的集合。新的架构提供了更好的可维护性，并允许终端用户通过 tree-shaking 减少多达一半的运行时大小。

这些模块还暴露了底层的 API，解锁了许多高级用例。

编译器支持自定义 AST 转换，用于构建时的自定义 (例如构建时的 i18n)。
核心运行时提供了一级的 API，用于创建针对不同渲染目标 (如原生移动端、WebGL 或终端) 的自定义渲染器。默认的 DOM 渲染器也是使用相同的 API 构建的。
@vue/reactivity 模块导出的函数可以直接访问 Vue 的反应性系统，并且可以作为一个独立的包使用。它可以与其他模板解决方案 (如 lit-html) 配对使用，甚至在非 UI 场景中使用。

解决规模问题的新 API

在 Vue 3 中，基于对象的 2.x API 基本没有变化。不过，3.0 还引入了 Composition API——一套新的 API，旨在解决 Vue 在大规模应用中的使用痛点。组成 API 建立在反应性 API 之上，实现了类似于 React 钩子的逻辑组成和重用，比 2.x 基于对象的 API 更灵活的代码组织模式和更可靠的类型推理。

Composition API 也可以通过 @vue/composition-api 插件与 Vue 2.x 一起使用，目前已经有适用于 Vue 2 和 3 的组成 API 实用库 (如 vueuse、vue-composable)。

性能改进

Vue 3 与 Vue 2 相比，在捆绑大小 (tree-shaking 时减少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和内存使用 (少了 54%) 方面都有显著的性能提升。

在 Vue 3 中，我们采取了“compiler-informed 虚拟 DOM”的方法：模板编译器执行积极的优化，并生成渲染函数代码，以提升静态内容，为绑定类型留下运行时提示，最重要的是，扁平化模板内的动态节点，以减少运行时遍历的成本。因此，用户可以获得两全其美的效果：从模板中获得编译器优化的性能，或者在用例需要时通过手动渲染函数直接控制。

改进的 TypeScript 集成

Vue 3 的代码库是用 TypeScript 编写的，具有自动生成，测试和捆绑的类型定义，因此它们始终是最新的。Composition API 可以很好地处理类型推断。Vetur 是我们的官方 VSCode 扩展，现在利用 Vue 3 改进的内部键入功能支持模板表达式和 props 类型检查。哦，如果您愿意，Vue 3 的打字完全支持 TSX。

实验特性

我们为单文件组件 (SFC，即 .vue 文件) 提出了两个新特性：

这些功能已在 Vue 3.0 中实现并可用，但仅出于收集反馈的目的而提供。在 RFC 合并之前，它们将保持试验状态。

我们还实现了一个当前未公开的 <Suspense> 组件，该组件允许在初始渲染或分支开关上等待嵌套的异步依赖项 (异步组件或具有 setup() 的组件)。我们正在与 Nuxt.js 团队一起测试和迭代此功能 (Nuxt 3 即将发布)，并且很可能会在 3.1 版中将其固化。

分阶段发布流程

Vue 3.0 的发布标志着该框架的全面就绪。尽管某些框架子项目可能仍需要进一步的工作才能达到稳定状态 (特别是 devtools 中的路由器和 Vuex 集成)，但我们认为今天使用 Vue 3 启动新的绿色项目是合适的。我们还鼓励图书馆作者开始升级您的项目以支持 Vue 3。

请查阅 Vue 3 工具库指南以获取有关所有框架子项目的详细信息。

迁移和 IE11 支持

由于时间限制，我们已推迟了迁移版本 (具有 v2 兼容行为的 v3 版本 + 迁移警告) 和 IE11 版本，并计划在 2020 年第四季度重点关注它们。因此，计划迁移现有 v2 应用程序的用户或要求 IE11 支持人员此时应意识到这些限制。

下一步

发布后的短期内，我们将专注于：

迁移版本
IE11 支持
新 devtools 中的 Router 和 Vuex 集成
Vetur 中模板类型推断的进一步改进

目前，面向 Vue 3 和 v3 的项目的文档网站，GitHub 分支和 npm dist 标签将保持在下一个状态。这意味着 npm install vue 仍将安装 Vue 2.x，npm install vue@next 将安装 Vue 3。我们计划在 2020 年底之前将所有文档链接，分支和 dist 标签切换为默认值 3.0。

同时，我们已经开始计划 2.7，这将是 2.x 发行版的最后一个计划的次要发行版。2.7 将向后移植来自 v3 的兼容改进，并发出有关 v3 中已删除/更改的 API 使用情况的警告，以帮助潜在的迁移。我们计划在 2021 年第一季度开发 2.7，它将在发布后直接变为 LTS，预计有 18 个月的维护时长。

尝试一下

要了解有关 Vue 3.0 的更多信息，请访问我们的新文档网站。如果您是现有的 Vue 2.x 用户，请直接转到迁移指南。

*根据 Google 报告的每周 Vue Devtools Chrome 扩展活跃用户。
(另外：Vue 3 官方中文文档仓库在这里)

转载

此文转载来自Vuejs 3 Release：One Piece. Vuejs 3.0 正式版发布！代号：海贼王

【必会】都已经9102年底了，你必须会TypeScript。

运行的时候有个报错，是什么原因呢

ERROR in /Users/andyyin/Desktop/vue3-News-master/node_modules/@vue/runtime-core/dist/runtime-core.d.ts(1342,115):
1342:115 A rest element type must be an array type.
1340 | export declare function warn(msg: string, ...args: any[]): void;
1341 |

1342 | export declare function watch<T extends MultiWatchSources, Immediate extends Readonly = false>(sources: [...T], cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions): WatchStopHandle;
| ^
1343 |
1344 | export declare function watch<T extends Readonly, Immediate extends Readonly = false>(source: T, cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions): WatchStopHandle;
1345 |
Version: typescript 3.9.7

3.0 还能出来不【vue 3 will be available by the end of Q2】

天寒之时必封初冬是什么意思？

【开源自荐】轻快图床：基于Koa2 + Vue3.x + Vite3.x + typescript开发的轻量级快捷图片管理系统、图床系统

项目名称：轻快图床
基于Koa2 + Vue3.x + Vite3.x + typescript开发的轻量级快捷图片管理系统、图床系统
项目地址：
- 仓库地址
  - github仓库地址：https://github.com/ischenliang/quickly-picture-bed
  - gitee仓库地址：https://gitee.com/itchenliang/quickly-picture-bed
- 演示地址：http://picture.itchenliang.club/#/
  账号：[email protected]
  密码：000000
项目简介 (100 字以内)：
程序员日常就是写博客，当然写博客时就会涉及到在博文中插入图片，所以往往会使用图床来进行图片资源管理，市面上较流行的图床系统是PicGo，是使用electron-vue开发的桌面应用程序，每次换电脑或者重装系统后都需要重新下载安装并配置图床，比较麻烦。所以开发了这款轻快图片管理系统，是基于vue3.x + typescript + vite + koa + mysql开发的前后端分离图床系统，使用该系统可以不需要每次都配置图床。
项目截图 (6张以内)：
- 上传区
- 图片管理
- 存储桶管理
- 字典管理
- 相册管理
- 存储桶插件开发

[blog] vue2&3的UI框架包括后台管理模板

Vuetify
Quasar
Element
Vue Material
Keen-UI
Buefy
Bootstrap Vue
Muse-UI
AT-UI
iView
Mint UI
Cube UI
Vueblu
Ant Design Vue

【整理】前端学习笔记总结清单，应有尽有🍇🍈🍉🍊🍋

学习笔记总结

整理一下年初网上一些总结笔记、杂谈。看看哪些适合你们的口味？

春风又绿江南岸

两岸猿声啼不住

停车坐爱枫林晚

桃花潭水深千尺

千里莺啼绿映红

东风无力百花残

君问归期未有期

【吐血整理清单二】前端面试全攻略，为您保驾护航，金三银四

【填坑大法好】哪些你们踩坑的案例统统到碗里来🌶🌶🌶

【开源自荐】SolidUI 一句话生成任何图形

本人介绍

本人从事十年年大数据相关工作，做过用户增长，BI，大数据中台，知识图谱，AI中台，擅长大数据AI相关技术栈。在CSDN输出很多专栏，是CSDN博客专家，CSDN大数据领域优质创作者，2018年参与共建WeDataSphere开源社区，社区属性是数据相关综合社区，共建过DataSphereStudio（开发管理集成框架），Exchangis（数据交换工具），Streamis(流式应用开发管理系统)，Apache Linkis (计算中间件) 。个人发起SolidUI 图形模型社区。Apache Asia 2022 讲师，Hadoop Meetup 2022 讲师，WeDataSphere Meetup 2022讲师。Apache Linkis Committer , EXIN DPO (数据保护官)。

2023年2月开始创业，全职运营SolidUI。

SolidUI介绍

一句话生成任何图形。

随着文本生成图像的语言模型兴起，SolidUI想帮人们快速构建可视化工具，可视化内容包括2D,3D,3D场景，从而快速构三维数据演示场景。SolidUI 是一个创新的项目，旨在将自然语言处理（NLP）与计算机图形学相结合，实现文生图功能。通过构建自研的文生图语言模型，SolidUI 利用 RLHF (Reinforcement Learning Human Feedback) 流程实现从文本描述到图形生成的过程。

SolidUI Gitee https://gitee.com/CloudOrc/SolidUI
SolidUI GitHub https://github.com/CloudOrc/SolidUI
SolidUI 官网地址 https://cloudorc.github.io/SolidUI-Website/
Discord https://discord.gg/NGRNu2mGeQ
CSDN https://limeng.blog.csdn.net/
SolidUI v0.2.0 发版文章 https://mp.weixin.qq.com/s/LikYVv_4O-Gv43wecw-b3w
SolidUI v0.2.0 功能介绍文章 https://mp.weixin.qq.com/s/2wyBmmYxeoNI9NdSM94oFw
SolidUI v0.2.0 教程视频 https://www.bilibili.com/video/BV1C8411R75D
SolidUI v0.2.0 概念视频 https://www.bilibili.com/video/BV11G411Z7Q4
SolidUI v0.2.0 演示环境 http://www.solidui.top/ admin/admin

tov-template

vite + vue3 + ts 开箱即用现代开发模板

仓库地址 🦖

Github 👉 tov-template

动机 🐗

为什么要做这个模板呢？

为下次开发节省浪费在配置上的时间
结合主流插件整合现代开发架构，提高开发效率

特点 🐳

Vite 的
Vue3 的
文件路由
布局系统
Mock 支持
Api 自动引入
组件自动引入
图标自动引入
VueUse 支持
TypeScript 的
Windi CSS 的
暗黑模式支持
SWR 请求支持
pinia 状态管理
pnpm 包管理器
跳转进度条支持
Inspect 调试支持
插件自动加载支持
Vitest 单元测试支持
支持 Markdown 渲染
路径别名 ~ 支持
命令行自动创建与删除
i18n 国际化支持
漂亮的 404 页支持
tsx 支持
gzip 资源压缩支持
环境变量配置支持
统一的代码规范与风格支持
生产环境自动移除开发日志