1. 什么是防抖节流 防抖:防止重复点击触发事件 首先啥是抖? 抖就是一哆嗦!原本点一下,现在点了3下!不知道老铁脑子是不是很有画面感!哈哈哈哈哈哈 典型应用就是防止用户多次重复点击请求数据. 代码实现要点:设置一个定时器,通过闭包,抓住定时器变量,控制定时器的添加和清除 直接上代码 function debounce(fn, time) { let _arguments = arguments let timeout = null return function () { if (timeou

不要让自己的上限成为你的底线 本来以为有万字的..没想到才堪堪近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,在学习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

闲聊 前段时间小颖在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千行代码,框架设计不合理

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

前言 大家在工作中想必都是通过自动化部署来进行前端项目的部署的,也就是我们在开发完某个需求时,我们只需要将代码推送到某个分支,然后就能自动完成部署,我们一般不用关心项目是如何build以及如何deploy的,这就极大得提高了我们的开发效率. 在没有自动化部署的情况下,前端项目的部署流程一般是这样的:(手动部署) 开发完成后本地进行build 将build后的文件交给运维(前端人员有权限的可省略) 将打包文件上传到服务器的指定目录 前端项目每次上线都得走一遍这个流程,对于程序员来讲这怎么能忍,宁愿

Vue3 的父子组件传值.绑定表单数据.UI库的二次封装.防抖等,想来大家都很熟悉了,本篇介绍一种使用 Typescript 的方式进行统一的封装的方法. 基础使用方法 Vue3对于表单的绑定提供了一种简单的方式:v-model.对于使用者来说非常方便,v-model="name" 就可以了. 自己做组件 但是当我们要自己做一个组件的时候,就有一点麻烦: https://staging-cn.vuejs.org/guide/components/events.html#usage-wi

博客地址:https://ainyi.com/98 Vue3.0,One Piece 接下来得抽空好好学习了 vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更

封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from 'lockr' axios.defaults.timeout = 30000 axios.defaults.baseURL = import.meta.env.VITE_HOST axios.defaults.headers['Content-Type'] = 'application/x-www-f

theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被打造出来的吗? 读完这篇文章你将学会: 如何使用pnpm搭建出一个menorepo环境 如何使用vite搭建一个基本的Vue3脚手架项目 如何开发调试一个自己的UI组件库 如何使用vite打包并发布自己的UI组件库 作为一个前端拥有一个属于自己的UI组件库是一件非常酷的事情.它不仅能让我们对组件的原

前置准备 一台电脑 vscode pnpm vscode插件:ESLint v2.2.6及以上 vscode插件:Prettier - Code formatter v9.5.0及以上 vscode插件:Vue Language Features (Volar) v0.39.4及以上 一:新建vue3项目 运行如下命令: pnpm create vite 模板选择vue.vue-ts 二:配置依赖包 修改项目根目录的package.json的scripts和devDependencies如下 "