logo
publist
写文章

简介

该用户还未填写简介

擅长的技术栈

可提供的服务

暂无可提供的服务

vue3+ts+vite的项目代码解读

本文解读了一个Vue3+TS+Vite项目中的store管理实现。重点分析了如何通过TypeScript增强Vuex的类型安全,主要包括:1)使用Omit工具类型从Vuex.Store中移除原生getters/commit/dispatch;2)通过类型合并(&)重新定义具有严格类型约束的commit/dispatch方法;3)利用泛型约束确保方法参数和返回值类型安全。这种实现方式能在编译

文章图片
#vue.js#javascript#前端
vue3+ts+vite的项目代码解读 第二日

本文对比了Vuex在JS和TS中的实现差异。JS版本直接在Vue应用中引入Vuex插件,创建包含actions、mutations等的模块对象;而TS版本将模块拆分为多个类型化文件。重点分析了TS实现:通过DeviceType枚举判断设备类型,AppState接口定义state结构,MutationType枚举确保mutations类型安全,并使用MutationTree接口约束mutations

文章图片
#javascript#前端#vue.js
vue3+ts+vite的项目代码解读 第三日

昨天我们代码看到了modules/app/actions.ts的代码,今天先简单过下actions.ts的代码再接着往下看。

文章图片
#javascript#开发语言#ecmascript +2
vue3+ts+vite的项目代码解读 第四日

排除 index.ts文件(通常是导出文件)将每个文件中的默认导出(路由配置数组)合并到一个大数组中最终得到所有路由配置的集合。

文章图片
#javascript#开发语言#ecmascript
vue3+ts+vite的项目代码解读 第五日

前面已经解读了store和router,今天就打算从一个具体的功能模块上面来进行解读。

文章图片
#javascript#开发语言#ecmascript +3
vue3+ts+vite的项目代码解读 六

本文介绍了Vue3项目登录注册功能的实现过程。主要内容包括:1) 使用unplugin-vue-components和unplugin-auto-import插件自动导入Element Plus组件和API;2) 通过Pinia管理用户状态;3) 实现路由守卫进行登录状态验证;4) 登录功能的具体实现流程;5) 登录后跳转逻辑处理。文章还提到需要进一步学习axios封装和Promise相关知识,并

文章图片
#javascript#前端#vue.js +3
vue3+ts+vite的项目代码解读 八

今天要做什么?先继续看代码吧,昨天看了看项目的一个layout布局的左侧布局模式显示逻辑控制今天就来看看这个左侧布局模式的详细写法吧:1.如何实现的左侧布局2.如何实现左侧布局相应的功能的3.动态样式控制是怎么写的?

文章图片
#vue.js#javascript#ecmascript +3
vue 动效库 Inspira UI 中比较好看的效果记录

本文介绍了Inspira UI提供的多种交互式组件资源,包括3D卡片、翻转卡片、设备模拟器(iPhone/Safari)、输入框、进度条、动画列表等视觉效果组件,以及Bento网格、书本、扩展画廊等创意布局。文章指出这些组件单独使用效果出色,但组合使用时可能存在兼容性问题,体现了社区共建动画库的局限性。作者还探讨了AI在组件开发中的应用潜力,认为AI可以生成高隔离性的复合组件,但仍需人工进行细节和

文章图片
#vue.js#ui#前端
vue3+ts+vite的项目代码解读 七

本文解析了一个Vue 3 + TypeScript + Vite项目中的Layout布局系统实现。重点分析了项目X的layout创建思路,包括不同屏幕宽度下的布局模式切换(左侧/左上/顶部布局)。详细解读了useSettingsStore的核心功能:通过watch实时监听state变化并持久化存储到localStorage,解决页面刷新后侧边栏状态丢失问题。文章还探讨了计算属性isLeft的实现原

文章图片
#vue.js#javascript#typescript
到底了