微信小程序自定义tabbar栏【中间突出样式】
前言 昨天主管突然给我说微信小程序默认的 tabBar 不美观，让我改成中间突出的那种样式。纵然我心里面有千般不情愿，但还是接下了这个任务。查了一下文档 自定义 tabBar 发现有这个方法，有思路了就赶紧搞起来，以下是我的开发经验分享。 一、自定义tabbar栏 配置 在 app.json 文件中的 tabBar 中指定 custom 字段为 true（意思是允……
分类 前端 articles
谈谈我对 path.resolve 的理解
前言 前一段时间在阅读源码的时候，遇到了path.resolve()，经过请教，终于知道了这个方法的作用。这边文章用来记录自己的使用心得。 正文 path.resolve() 作用：path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径。 语法：path.resolve( [from…],to )。 说明：……
七个 Vue 项目用得上的 JavaScript 库分享
前言 借助开源库加速 Vue 项目的开发进度是现代前端开发比较常见的方式，平常收集一些 JavaScript 库介绍，在遇到需要的时候可以信手拈来。Vue 生态有很多不错的依赖库或者组件，是使用 Vue 开发前端的原因之一。接下来将会介绍七个 Vue 项目中会用到的 JavaScript 库。 一、vueuse 这是 GitHub 上星最多的库之一，拥有超过 12.8k 颗星，这……
从Vue2 到 Vue3，这些路由差异你需要掌握！
前言 Vue3 已经出来很长时间了，但对 Vue3 的路由却了解的非常少，甚至只知道最基本的跳转和参数获取，这些技能处理一些复杂的功能是不够的，最近把 Vue3 的路由版本差异给学习了一下，在这里把结果分享给大家！！！ 一、导航守卫 全局前置守卫 全局前置守卫通常用来做权限控制，使用 router.beforeEach 即可添加： const router = createRouter({...}) router.beforeEach((to, from) => { // ...……
盘点一些惊艳一时的 CSS 属性
前言 随着前端的不断发展，更多新的 CSS 属性不断加入提案，本文列举 5 个不常用但很有用且你见过也可能没见过的 CSS 属性，带大家领略 CSS 之美。 一、position: sticky 不知道大家平时业务开发中有没有碰到这样的需求：标题在滚动的时候，会一直贴着最顶上。这种场景实际上很多：比如表格的标题栏、网站的导航……
Pinia食用指南
前言 Pinia ，发音为 /piːnjʌ/，来源于西班牙语 piña 。意思为菠萝，表示与菠萝一样，由很多小块组成。在 Pinia 中，每个 Store 都是单独存在，一同进行状态管理。与 Vuex 相比，Pinia 提供了更简单的 API，更少的规范，以及 Composition-API 风格的 API 。更重要的是，与 TypeScript 一起使用具有可靠的类型推断支持。 Pinia与Vu……
package.json配置解读
前言 package.json是每个前端项目都会有的json文件，位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json。package.json有许多配置与项目息息相关，了解他们有助于对项目的开发，接下来让我们开始了解package.json的……
何为 Vue3 组件标注 TS 类型，看这篇文章就够了！
前言 要说今年最热门的前端技术，Vue3 和 TS 绝对榜上有名了。今天就给大家分享一下如何在 Vue3 组件中结合 Composition-Api 使用 TS 类型。如果有不会或者不熟的小伙伴，一起学起来吧！ 一、为 props 标注类型 使用 < script setup > 当使用 < script setup > 时，defineProps() 宏函数支持从它的参数中推导类型： 这被称为 运行时声明 ，因为……
助你从Vue2过渡到Vue3的常见使用场景
前言 相信有很多人已经学习了 Vue3 的 API 和 新特性，但是令人头疼的是工作中依然使用的是 Vue2，也不知道自己的水平能否上手 Vue3 项目，今天把实践过程中常见使用场景分享给大家，希望对你们有所帮助。 场景一：父子组件数据传递 父组件数据传递到子组件 Vue3 中父组件同样是通过属性传递数据，但子组件接受数据的方……
Vue3中操作dom的四种方式，建议收藏！！！
前言 最近主管提出了许多优化用户体验的要求，其中很多涉及 dom 操作。本文将 Vue3 中常见的 dom 操作总结了一下。觉得文章不错、或对自己开发有所帮助，欢迎点赞收藏！ 一、通过 ref 拿到 dom 的引用 <template> <div class="ref-container"> <div ref="sectionRef" class="ref-section"></div> </div> </template> <script lang="ts" setup> import { ref } from 'vue' const sectionRef = ref() </script> 通过对 div 元素添加 ref 属性，为了获取到这个元素，我们声明了一个与 ref 属性名……