7 天前 / 九彩拼盘
React 自从上一年发布了 React17 之后，团队貌似就有些划水的嫌疑，2021 年主要和其他贡献者进行了一些友好碰面，比如在布宜诺斯艾利斯（阿根廷首都）的聚会： 以及给字节跳动做直播分享： 工作上主要是在修复 React17 的 bug，但其实修复的也不是很多，目前只发了两个修补版本号，最新版本是 V17.0.2，一年只发了两个 patch 版本，工作量显然不足，年终绩效就很为他们感到担心。 抱着怀疑的态度，比较优秀的人总是自驱的，怎么会划水呢？于是翻了下 Dan Abramov 的牌子（gitHub 提交记录），这哥们是 React 的核心成员，在 React 也待了 5 年之久...
34 天前 / cxc_xinconan
Pinia正式成为 vuejs 官方的状态库，意味着就是Vuex 5.x。先来看早期vue 上一个关于 Vuex 5.x 的 RFC ： 描述中可以看到，Vue 5.x 主要改善以下几个特性： 同时支持 composition api 和 options api 的语法；去掉 mutations，只有 state、getters 和 actions；不支持嵌套的模块，通过组合 store 来代替；更完善的 Typescript 支持；清晰、显式的代码拆分；而 Pinia 正是基于 RFC 所生成的一个玩物。
41 天前 / 冷星1024
前言本文不引战，成熟的人应该脱离框架的范畴，而不是纠结谁更好或者谁更不好。有道是黑猫白猫，抓到老鼠就是好猫。 所以本文会带大家读源码。简单易懂，大佬小白都能看明白。并收获益处。 从 new 一个 Vue 的实例粗来开始准备工作： chrome 打开 Vue github 地址 [1] >cd「你的路径」 >gitclonehttps://github.com/vuejs/vue.git >codevue(ps:此命令为用 VScode打开vue项目) 复制代码 看一下 vue 项目的目录结构： image.png 哇，结构很清晰噢！好像莫名的木有那么复杂嘛（为分析源码做心理建设） 全局安装 serve： >npmi-gserve Or >yarnglobaladdserve...
46 天前 / 青年码农
我有个模版项目是用 vue-cli3.x 开发的，测试部署已经没问题，突发奇想，能不能打包成 exe 文件，在桌面运行，开始鼓捣。 1.先将项目打包 yarn build2.安装 electron 和 electron-packager yarn add electronyarn add electron-packager3.dist 目录新建 main.js 文件，内容如下： const { app, BrowserWindow, Menu} = require('electron') function createWindow() { // 去掉菜单 Menu.setApplicationMenu(null) // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: t...
49 天前 / 青年码农
1.创建项目 使用 vue-cli V3.0+ 创建项目 vue create antd-vue-theme-demo 选择 css 预处理器（其他的根据项目所需选择） 由于 ant-design-vue 的样式使用的是 less 作为开发语言，所以这里我们选择 Less 其他的根据自己的需要配置即可，创建完成 注意：项目创建完成后，需要将 less 的版本号改成 3.0 以下，否则后面再更改主题时会出错，这里改成了 2.7.2 改完后保存，并重新下载依赖 yarn install 下载完后启动项目 yarn serve 在浏览器输入 localhost:8080 就可以看到创建好的项目 项目已经启动成功...
50 天前 / 冷星1024
1. 前言 大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，已进行两个多月，大家一起交流学习，共同进步。 想学源码，极力推荐之前我写的《学习源码整体架构系列》包含 jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue 等十余篇源码文章。 本文仓库 ni-analysis，求个 star^_^[1] 最近组织了源码共读活动，大家一起学习源码。于是搜寻各种值得我们学习，且代码行数不多的源码。 之前写了 Vue3 相关的两篇文章。
52 天前 / 青年码农
今天打开 Vue 项目中 main.js 文件中，发现引入文件使用了两种方式。 importVuefrom'vue' importAppfrom'./App.vue' importrouterfrom'./router' //引入 echarts importechartsfrom'echarts' import'echarts/map/js/china.js'; Vue.prototype.$echarts=echarts //将自动注册所有组件为全局组件 importdataVfrom'@jiaminghi/data-view' Vue.use(dataV) Vue.use 和 Vue.prototype 这两种方式引入包。那这两种方式有什么区别，既然困惑，那就本着刨根问底的心态，去了解下这两种方式的不同。
54 天前 / 青年码农
Vite — 一个 Vue 作者开发的 Web 开发工具，它具有快速的冷启动、及时的模块热更新、真正的按需加载。 Vite 基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。既然这么好，那就赶紧体验下。 1.创建并运行 Vue + Vite 项目 创建基于 Vite 的项目比较简单，这里就不多讲了，几行命令搞定。 ##创建项目 yarncreatevite-app ##进入项目根目录 cd ##安装依赖 yarn ##运行项目 yarndev 生成的项目结构也是十分简单，默认是没有 vite.config.js。
55 天前 / HueiFeng
这是第124篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队关注我们吧～本文首发于政采云前端团队博客：LRU 缓存 -keep-alive 实现原理 https://www.zoo.team/article/lru-keep-alive 前言 相信大部分同学在日常需求开发中或多或少的会有需要一个组件状态被持久化、不被重新渲染的场景，熟悉 vue 的同学一定会想到 keep-alive 这个内置组件。 那么什么是 keep-alive 呢？ keep-alive 是 Vue.js 的一个 内置组件。
55 天前 / 太空编程
Vue 有一些很实用的指令v-showv-ifv-textv-htmlv-bindv-on可以帮助我们实现很复杂的功能，同时它还开辟了钩子供我们自己实现自定义指令。根据自己平时开发总结了一些可以通过指令实现的功能场景： 控制页面元素显示与隐藏，可用作控制权限功能页面元素点击事件防抖与节流通过自定义指令控制图片懒加载针对页面特定元素添加自定义行为对输入内容进行过滤下面列举一些常见的自定义指令的实现代码： 权限指令实现页面操作按钮级别的控制，通过查找父元素然后移除它下面子元素来控制按钮的显示与与否 /*** 权限指令* @param {string} value 权限标识* 例：*/Vu...
56 天前 / 冷星1024
大厂技术高级前端Node 进阶 点击上方程序员成长指北，关注公众号 回复 1，加入高级 Node 交流群 原文地址：https://juejin.cn/post/7034796986889043999 作者：hpstream_ ( 感谢小伙伴投稿) 谈到 WebComponent 很多人很容易想到 Vue,React 中的组件。但其实 H5 原生也已经支持了组件的编写。 查看 Web Components MDN 文档，里面原话如下： Web ComponentsWeb Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的 web 应用中使用它们。
60 天前 / 青年码农
最近发现 vue 两大 UI 框架 Element UI 和 Ant Design Vue 都已经支持 Vue3 了，如果再不学习 Vue3 就落伍了，此文章记录下使用 @vue/cli 搭建 Vue3 项目完整流程。 1 安装 vue/cli 更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli，如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉。 注：如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装 卸载 npmuninstallvue-cli-g #OR yarnglobalremovevue-cli 安装 npminstall-g@vue/cli #OR yarnglobaladd@vue/cli检查 注：V 要大写 2 创建项目 提供两种构建方式...
61 天前 / 青年码农
点击上方“青年码农”关注 回复“特效源码”可获取各种资料 Vue 官方对单向数据流的描述是这样的（去掉了几句）：父子 prop 之间形成了一个单向下行绑定，父级 prop 的更新会向下流动到子组件中，额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。 意思是说，父级给子组件是啥，子组件可以用，也可以不用，但是不能修改。这就保证了数据可控性，但是事实真的如此吗？官方文档下面还有一句话。
65 天前 / 九彩拼盘
先来个预告效果图开场前言：浏览苹果官网时，你会看到发现每个设备在介绍页底部有这么一行文字：“用增强现实看看***”。使用苹果设备点击之后就能将该设备投放于用户所在场景视界，在手机摄像头转动的时候，也能看到物体对象不同的角度，感觉就像真的有一台手机放在你的面前。（效果如下图。注意：由于该技术采用苹果自有的 arkit 技术，安卓手机无法查看） 聪明的你可能已经想到了，为什么只能用苹果手机才能查看，那有没有一种纯前端实现的通用的 web AR 技术呢？ 纯前端解决方案纯前端技术的实现可以用下图总结：以 JSARToolKit 为例： 使用 WebRTC 获...
68 天前 / 青年码农
WebSocket 协议自 2008 年诞生 2011 年成为国际标准以来。目前所有浏览器都已经支持了。因此我们不需要担心在项目中使用是否会有其他问题，WebSocket 实现了浏览器与服务器全双工通信，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。 MDN 上面有详细的文档，这里就不过多介绍，我们直接在 vue 项目上使用 WebSocket，其实可以借助库实现，但是这个项目我们使用原生的，毕竟代码不多，也没必要在安装个依赖。WebSocket 属性很多，用到了 onopen、onerror、onmessage 和 onclose，在 methods 方法中定义几个函数。