前言 迟来的Vue3文章,其实早在今年3月份时就把Vue3过了一遍.在去年年末又把 TypeScript 重新学了一遍,为了上 Vue3 的车,更好的开车.在上家公司4月份时,上级领导分配了一个内部的 党务系统开发 ,这个系统前端是由我一个人来开发,功能和需求也不怎么复杂的一个B 端 系统,直接上的 Vue3 + TypeScript + Element Plus 开发的,开发两周到最后的上线,期间也遇到很多小坑,很多无处可查,慢慢琢磨最后还是克服了. Vue3 + TypeScript Stu

不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近6000字.为了水文的嫌疑,只挑了重点的地方讲,比如component内的组件就挑了右键弹窗去说明,建议在看本文的时候边查看项目,有不懂的可以在下方评论,谢谢. github github: https://github.com/heiyehk/electron-vue3-inote 包下载 release: https://github.com/heiyehk/electron-vue3-inote/releases 接上篇配置篇

vite+vue3+typescript搭建项目过程   vite和vue3.0都出来一段时间了,尝试一下搭vite+vue3+ts的项目 相关资料网址 vue3.0官网:https://v3.vuejs.org/guide/introduction.html#getting-started Element对vue3支持--Element Plus官网地址:https://element-plus.gitee.io/#/zh-CNgithub地址:https://github.com/eleme

一.前言 vue3的快速更新,很多IT发展快的地区在22开始都已经提上日程,小编所在的青岛好像最近才有点风波.vue3的人才在青岛还是比较稀缺的哈,纯属小编自己的看法,可能小编是个井底之蛙!! vue2+webpack的时代要过去了,主要是启动时间太慢了.所以还是比较推荐使用Vite进行构建,vue3官方也是推荐的!!速度快,基本上是秒启动级别的!带的例子还是vue3最新的组合式语法糖setup. 二.vite介绍和搭建 1. 介绍 Vite官网 Vite 是一个轻量级的.速度极快的构建工具,对

vue3+TS 自定义指令:长按触发绑定的函数 而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢. 编写自定义指令时遇到的几个难点 1.自定义指令的类型 在ts中写任何东西都要考虑到类型的问题,自定义指令的类型问题依然存在 2.在ts中使用setTimeout() 函数 setTimeout()函数的默认返回值是一个随机的number ,这个number 代表了这个计时器的唯一id,但是并不能直接将其类型定义为number 否则会出现报错. 3

不要让自己的上限成为你的底线 前言 诈尸更新系列,为了跟上脚步,尝试了vue3,在学习vue3的时候顺便学习一手electron和ts,本教程将分别发布,源码会在最后的文章发布.因为还在开发中,目前也是为了防止有些遇到坑不会及时忘掉,所以先整理一部分出来 将分2部分发出教程,因为配置的东西个人感觉有点多并且跟开发内容相关的东西并不是很多,因此单独发出,见谅,第二篇这两天发出,长文警告!. 开发思路: 页面: 列表页index.vue 头部.搜索.内容部分,只能有一个列表页存在 设置页settin

项目简介 vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案,是 有来技术团队 继 youlai-mall 全栈开源商城项目的又一开源力作. 项目使用 Vue3 + Vite2 + TypeScript + Element-Plus + Vue Router + Pinia + Volar 等前端主流技术栈,基于此项目模板完成有来商城管理前端的 Vue3 版本. 本篇先对本项目功能.技术栈进

目录 新项目了 Vite搭建 eslint 先安装eslint 创建.eslintrc.js 引入规则 Airbnb 配合prettier 对ts的支持 .eslintrc.js 在页面上查看eslint报错 使用setup sugar的坑 新项目了 浑浑噩噩一个五年前的vue2的项目维护了一年多,要开始重构了.前端还是vue2,要加个后台系统来管理配置化功能.后台管理就捡起vue3吧,好久没写了,看看有啥新东西玩,有空了再更新一下博客. Vite搭建 之前写了个用vue-cli来搭建的(vue

Mitt 在vue3中 $ on,$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,因此大家熟悉的EventBus便无法使用了.然而我们习惯了使用EventBus,对于这种情况我们可以使用Mitt库 npm i mitt -S 首先要在全局挂载 mitt 在app.config.globalProperties上挂在$Bus 使用ts必须要拓展ComponentCustomProperties类型才能获得类型提示 main.ts import { createApp }

每天都要开心(▽)哇: 首先呢,我们来创建项目 执行下面命令,开始创建项目啦 $ npm i -g @quasar/cli $ npm init quasar 下面是我的选项,仅供参考哇 √ What would you like to build? » App with Quasar CLI, let's go! √ Project folder: ... quasar-test-pro20220627 √ Pick Quasar version: » Quasar v2 (Vue 3 | l

闲聊 前段时间小颖在B站找了个学习vue3+TS的视频,自己尝试着搭建了一些基础代码,在实现功能的过程中遇到了一些问题,为了防止自己遗忘,写个随笔记录一下嘻嘻 项目代码 git地址:vue3.x-ts-element-plus--demo 踩坑集合: 1.根据 element-plus 官网提示 按需引入 组件后,遇到:ElLoading.ElMessage.ElNotification.ElMessageBox  样式丢失 起因是小颖在封装  axios 时,发现引入的  ElNotifica

现在web开发变得更加美妙高效,在于开发工具设计得更好了,丰富性与易用性,都有所提高.丰富性带来了一个幸福的烦恼,就是针对实际应用场景,如何选择工具 ? 1. Vue Cli和Vite之间的选择 Vite的开发环境体验好,基于浏览器原生ES6 Modules提供的功能,不对ES高版本语法进行转译,省略掉耗时的打包流程, 可是考虑到: 1) 项目要用到真机调试功能,开发环境下调试代码时不能使用ES高版本的语法,用着不顺畅. 2) Vite的一些痛点: Vite最新版2.7.x版本自带的less-l

前言 今天,我们使用Vite2.0+Vue3+TS来试玩一下,开发一个demo项目.实战 我们,打开Vite官方网站(https://cn.vitejs.dev/). Vite (法语意为 "快速的",发音 /vit/) 是一种新型前端构建工具,能够显著提升前端开发体验.它主要由两部分组成: 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR). 一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可以输出用于生产环境

前言 一周时间,没见了,大家有没有想我啊!哈哈!我知道肯定会有的.言归正传,我们切入正题.上一篇文章中我主要介绍了使用Vite2+Vue3+Ts如何更快的入手项目.那么,今天我将会带领大家认识一个新的Vue3项目构建工具--parcel-vue-cli.这是什么?怎么以前没有听说过.有这样的疑问其实并不奇怪,因为这个构建工具是我自己开发的.你可能会这样问:"你自己开发的?这么厉害吗"?是的,豆哥其实就这么厉害.开玩笑啦!其实没有你想得那么厉害.都是搬砖人,主要看思路.好,不扯了!本篇文

前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Express + TS.目前项目还没有完全实现,文章的目的是记录阶段性"胜利"和分享知识. 关于搭建 TS 项目请看搭建 Webpack + TypeScript + Babel 的项目或者JavaScript迁移. Room 的概念 私密 Room 在开始做私聊功能之前,要掌握 Socke

前言 自成都九月份以来疫情原因被封了一两周,居家着实无聊,每天都是盯着微信公众号发布的疫情数据看,那种页面,就我一个前端仔来说,看着是真的丑啊!(⊙_⊙)?既然丑,那就自己动手开整!项目是2022.9.5开始的,截止2022.9.12我完成了大概有八成.主要是想让数据更加直观,而且可离线下载(当然还有装逼!┑(￣Д ￣)┍). 项目描述 为证明是有料的,先看效果图(提前装逼!┗|｀O′|┛ 嗷~~): 项目我是公开了的(￣m￣)有兴趣的可以下下来玩玩,这是我第一次使用vue3+ts构建项目,肯定

前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目中去使用Vue2的组件呢,其实是因为历史原因.好几个老的核心的项目都是使用Vue2来写的,在中期以及空闲的时候团队是有机会使用Vue3去重构,但是并没有这样做,到了现在这个阶段已经太晚了,项目变得庞大,人员也减少了. 最近在维护一个项目,被折磨得不行,比如一个.vue文件有3千行代码,框架设计不合理

最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把自己卷死了(没有办法,项目经理说项目要1周写界面,2周发版,我这个项目前端只我1个人,后端有3个人...).......下面要说的是某一个界面中的一个小模块. 产品原型 需求说明: [站点配置] 1.站点配置,需要线路属性配置完后才可以配置,编辑的时候做校验,线路属性没有配置完,不可以编辑,禁用状态. 2.上下行:需要选择配置

升级带来的性能提升总结 1.模板编译优化:节点达到一定个数,会自动优化 每次重新渲染,会调用createVnode创建虚拟节点,VUE3会做静态提升,静态节点进行提取,进行优化 2.事件 缓存事件,防止重新创建事件 3.响应式原理 defineProperty 改为 proxy 4.Vue3 diff算法,可以根据patchFlag做diff Vue2是全量的diff,最长递增子序列算法 5.options Api改为 compositionApi 用起来比较方便,vue2一个功能要拆分到多个里

本文所使用的源码为 objc4-647 和 CF-1153.18 实际上这是我本周实习周报的一部分,写的比较仓促,如有差错还请多多指正. 不讲用法,只说原理. 引用计数如何存储 有些对象如果支持使用 TaggedPointer,苹果会直接将其指针值作为引用计数返回:如果当前设备是 64 位环境并且使用 Objective-C 2.0,那么“一些”对象会使用其 isa 指针的一部分空间来存储它的引用计数:否则 Runtime 会使用一张散列表来管理引用计数. 其实还有一种情况会改变引用计数的存储策

rabbit-vue3-ts-小兔鲜儿2022新版 项目使用 Vite + Vue3 + TypeScript + Pinia + VueRouter@4 进行开发. 代码检查和格式化为:ESlint + Prettier 项目预览地址 项目预览地址:http://erabbit.itheima.net/ 推荐 IDE 设置 VSCode 编辑器 + 插件-Volar (注意禁用 Vetur 插件) + 插件-TypeScript Vue Plugin (Volar). 注意: Vue3 + T