快起来搬砖了-CSDN博客

原创 Vue3 从零搭建项目及插件的使用

node：v14.16.1vue：@vue/cli 4.5.121、项目初始化1.1、项目前期需求//使用Vue3，需要升级vue-cli，全局安装最先版本@vue/cli；npm install -g @vue/cli@next// 安装成功后输入,显示，安装成功 vue -V //@vue/cli 4.5.12 1.2、安装成功后搭建Vue3项目vue create myproject1.3、启动服务cd myproject //进入文件npm run serv

2022-01-20 09:35:36 1132

原创 UniApp 页面布局自定义头部导航

在移动端应用开发中，页面布局的精准适配是一个关键问题。尤其是在 UniApp 中，不同设备的屏幕尺寸、状态栏高度以及头部布局的差异，可能导致页面内容错位或显示不全。本文将分享如何通过动态计算头部高度，实现页面内容的精准定位，确保在不同设备上都能正确显示。

2025-04-09 10:47:50 616

原创在Uniapp中使用阿里云OSS插件实现文件上传

本文介绍了如何在Uniapp小程序中使用阿里云OSS插件实现文件上传功能。通过引入阿里云OSS插件，配置初始化参数，并结合uni.chooseVideo选择或拍摄视频文件，最终将文件上传至阿里云OSS。文章详细讲解了插件的初始化、文件上传的实现步骤，以及如何监听上传状态。通过本文，开发者可以快速掌握在Uniapp小程序中集成阿里云OSS的方法，轻松实现高效的文件上传功能。

2025-02-10 11:37:31 1101

原创阿里OSS前端分片上传实现

阿里OSS前端分片上传实现,在现代Web开发中，文件上传是一个常见的需求，尤其是在处理大文件时，分片上传可以显著提高上传效率和用户体验。通过以上步骤，你可以实现一个高效的前端分片上传功能，适用于处理大文件上传场景。阿里云OSS提供了强大的存储和传输能力，结合前端技术，可以为用户提供更好的使用体验。分片上传大文件：使用multipartUpload方法进行分片上传，并在上传过程中处理进度条。直接上传小文件：如果文件小于100KB，直接使用put方法上传。初始化OSS客户端：使用获取到的凭证初始化OSS客户端。

2025-01-22 10:34:56 429

原创使用 Element-UI 中的 el-button 添加防抖指令防止重复提交

在现代Web开发中，防止用户在短时间内多次点击提交按钮是一个常见的需求。本文将介绍如何在Vue.js项目中使用自定义指令来实现按钮的防抖功能，防止用户在短时间内多次点击提交按钮。在使用Element-UI的el-button组件时，如果用户在短时间内多次点击提交按钮，可能会导致表单数据被多次提交。为了避免这种情况，我们需要在按钮上添加防抖功能，即在用户点击按钮后的一段时间内禁用按钮，防止重复点击。接下来，在需要添加防抖功能的按钮上使用v-no-more-click指令。

2025-01-20 14:58:30 865

原创创意实现！在uni-app小程序商品详情页轮播中嵌入视频播放功能

通过uni-app框架实现商城小程序商品详情页的视频与图片轮播功能，以提升用户体验和增加商品吸引力。通过展示商品视频和图片，用户可以更全面地了解商品细节，从而提高购买决策的便利性和满意度。这种功能适用于各类商品，如服装、家具、电子产品等。通过本文的步骤，您将学会如何在商城小程序中利用uni-app框架实现商品详情页的视频与图片轮播功能

2024-09-25 11:10:26 1484

原创从秒到年：打造与过去日期相关的智能显示

在前端开发中，经常需要处理过去的日期，并将其转换为易读的形式，比如"刚刚"、"几分钟前"、"几小时前"等。本文介绍了一种自定义的JavaScript方法，可以帮助开发者轻松地格式化过去日期。通过该方法，你可以根据时间差的范围返回不同的字符串表示，同时还可以选择不同的格式类型，如"YYYY-MM-DD"、"YYYY年MM月DD日"等。

2024-03-07 15:16:25 367

原创 Vue项目实现在线预览文件【超实用】

假设有一个Vue组件，需要显示一个文件的链接，并提供文件预览功能。

2023-07-13 11:07:57 6157

原创 moment获取当前年、月、周的第一天和最后一天

moment获取当前年、月、周的第一天和最后一天。

2023-03-22 13:45:21 2665

原创删除数组中某个属性值相同的对象元素

删除数组中某个属性值相同的对象元素。

2023-02-20 15:06:58 592

原创【Vue实用功能】elementUI 自定义表单模板组件

elementUI 实现一个自定义的表单模板组件【Vue实用功能】elementUI 自定义表单模板组件背景：在项目开发中，我们会遇到这种需求，在管理后台添加自定义表单，在指定的页面使用定义好的表单直接上代码：

2022-12-20 17:12:53 4585

原创 uni-app app分享到朋友和朋友圈

可以分享文字、图片、图文、音乐、视频等多种形式。同时注意，分享为小程序也使用本API。即在App里可以通过本API把一个内容以小程序（通常为内容页）方式直接分享给微信好友。uni-app的App引擎封装了微信、QQ、微博的分享SDK，开发者可以直接调用相关功能。可以分享到微信、QQ、微博，每个社交平台被称为分享服务提供商，即provider。

2022-12-19 17:33:16 3016 2

原创【Vue功能】weixin-js-sdk实现vue分享功能

h5链接分享到微信好友、朋友圈的链接卡片内容可以自定义安装微信sdk使用新建文件：plugins/wechat.js页面使用注意：使用微信自定义分享功能的时候，当分享链接中存在中文的时候，要进行encodeURIComponent()，原因：在安卓手机上能成功自定义分享，ios手机上则不能成功分享，安卓手机会自动encodeURIComponent，而IOS不会。

2022-12-07 19:30:00 857

原创【uni-app】uni-app获取当前环境信息

使用uniapp 的壳嵌套vue开发的网页端项目链接，在该Vue项目中获取当前环境是否为APP或者微信小程序，对不同环境下做专属的操作。HTML 在不同的环境下，可能需要执行不同的操作或传递不同的消息。在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK。2、使用Vuex，为其他页面使用时准备：store/index.js。1、在public/index.html中引入JS-SDK。3、在APP.vue中使用。运行到小程序看看效果。

2022-11-12 13:05:09 2975

原创【javascript】javascript数组常用方法使用

收集一些项目开发javascript数组常用方法，大家一起学习。

2022-11-10 11:02:23 204

原创【Vue3】手把手教你创建前端项目 Vue3 + Ts + vite + pinia

手把手教你创建前端项目 Vue3 + Ts + vite + pinia

2022-11-03 15:46:30 3535 1

原创【typescript】Typescript tsconfig.json全解析

tsconfig.json是编译TypeScript的配置文件，对书写TypeScript代码十分重要，如果有些选项你没配置，则需要严格按照TypeScript的规则来书写，书写出不符合规则的代码，会导致编译报错。我们早期可以关闭一些规则设置，从而更愉快的从js转为ts开发

2022-11-02 10:34:44 1530

原创【Vue实用功能】彻底搞懂Vue中的Mixin混入

【Vue实用功能】彻底搞懂Vue中的Mixin混入Mixin和VueX的区别

2022-10-28 15:27:56 3306

原创【Vue实用功能】Vue实现拖拽元素、列表拖拽排序

【Vue实用功能】Vue实现拖拽元素、列表拖拽排序左右两个容器，左边和右边的元素可以拖动互换列表拖拽排序

2022-10-27 11:23:13 3518 1

原创【Vue实用功能】Vue中H5页面缓存解决方案

每次更新H5页面的时候，都需要刷新或者清楚缓存，才能加载到最新的代码，这大大降低了用户的体验。

2022-10-24 14:19:27 2047

原创【Vue实用功能】Vue开发中非父组件之间的通信

1. 父子组件之间的通信问题 2. Vue开发中 `$emit、$on和$off` 的用法 3. eventBus遇到数据不更新的问题

2022-10-12 11:28:54 639

原创【Vue实用功能】Vue监听浏览器刷新和关闭事件

【Vue实用功能】Vue监听浏览器刷新和关闭事件。在前端开发中，我们通常会遇到这样的需求，用户离开、刷新页面前，修改数据未进行保存操作，需要提示框提醒用户。

2022-10-11 16:08:02 4163

原创 git多账号配置

利用ssh-keygen -t rsa -f github_id_rsa 生成一个github的秘钥，并且名称为github_id_rsa，-f 的意思是指定生成的秘钥的名称。然后添加一个config文件。然后就可以进行clone。最后生成这样的秘钥对。

2022-10-11 14:51:08 232

原创 nvm下载安装及使用方法

nvm下载安装及使用方法我们通常在开发中，会存在不同的项目用到不同的node版本和npm版本，这时候我们就可以用到nvm来快速切换版本

2022-09-27 16:53:47 1412

原创【Vue实用功能】Vue实现浏览器全屏退出全屏

Vue实现浏览器全屏和退出全屏功能

2022-08-18 14:12:29 574

原创【Vue实用功能】Vue中实现粒子效果 particles.js

Vue中实现粒子效果为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。动态粒子要展示的位置，id放到了使用页面最外层的父元素上。

2022-08-16 14:20:17 2206

原创【Vue实用功能】Vue数组中的某属性拼接成字符串

Vue数组中的某属性拼接成字符串。

2022-08-09 09:39:15 3033

原创 JS计算精度问题和及数据格式

JS计算精度问题保留小数点后几位数据这里记录前端js数据计算一些问题

2022-07-13 10:31:29 298

原创【Vue实用功能】Vue 项目首次打开加载很慢的优化方案

当SPA（单页应用程序）变得很复杂时，构建后的包会变得很大，从而导致页面的加载时间过长。vue-router 支持 webpack 内置的异步模块加载系统。所以采用路由被访问时按需加载，使用较少的路由组件就不用打包进 bundles 中。方案2：CDN加速...

2022-06-20 14:54:49 5854 1

原创小程序修改上一页面的数据

微信小程序在当前页面修改上一个页面的数据

2022-06-08 17:08:15 1223 1

原创 Ts编译配置

Ts编译选项、自动编译文件或者编译整个项目

2022-06-07 16:00:27 2243

原创 ts数据类型定义大全

ts数组类型的定义，ts对象类型、ts字符串类型，ts函数类型

2022-06-01 10:40:10 4435

原创【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件

Vue实现文档在线预览文档，在线预览PDF、Word、Excel和ppt等office文件

2022-05-30 13:41:44 51071 16

原创【Vue实用功能】Vue实现tab页多页面切换

Vue实现tab页多页面切换实现路由发生变化时，新增一个tab标签页，点击其他标签时切换到对应的页面，刷新网页同时保留状态这里就直接说它实现的代码就OK！！！VueX记录下每次新增后的tab标签页路由store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { // 路由导航start // 缓存组件页面 ca

2022-05-19 17:26:06 8643

原创【Vue实用功能】Vue获取URL图片的宽高

Vue获取URL图片的宽高方法1：函数类型datadragEnd() { // 创建实例对象 var img = new Image(); // 图片地址 img.src = "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-05/19/G0JSVphpS2MItH1652924237220519.jpg"; let res = {} img.onload = function () { res = { w

2022-05-19 10:08:28 7040

原创【Vue实用功能】Vue页面转Pdf实践

需求场景将页面指定的区域转PDF并调用打印机，生成的PDF是横向分页技术栈：Vue、Element、html2Canvas、jspdf、print-js实现步骤插件安装好的前提：页面通过html2Canvas生成图片 —— jspdf转PDF —— print-js调用打印机安装插件这里主要说html2Canvas、jspdf、print-js npm install print-js --save npm install html2canvas --save ...

2022-05-18 10:45:01 1337

原创 element-ui 的el-popover 自定义弹出和关闭

element-ui 的el-popover 自定义弹出和关闭业务需求：鼠标悬停打开弹窗，点击弹窗里面的内容后关闭弹窗Element 中 Popover 弹出框的弹出方式有 hover，click，focus，手动激活几种方式，根据业务需求，可以如下使用：el-popover弹出框关闭和打开分别用 doClose() 和 doShow() 方法，Element UI文档中没有提到这两个方法 <el-popover placement="bottom" ref="popover

2022-05-16 13:13:46 9281 6

原创【Vue实用功能】Vue生成二维码

Vue生成二维码复制到剪切板安装qrcodejs2： https://www.npmjs.com/package/qrcodejs2npm i qrcodejs2需要生成的页面引用 <div class="shareWx"> <div id="qrcode" ref="qrcode"></div> </div> <div>微信扫码分享项目</div>import QRCode from "qrcodej

2022-05-12 11:16:36 603

原创 Vue生命周期

什么是 vue 生命周期Vue 有⼀个完整的⽣命周期，从开始创建、初始化数据、编译模版、挂载Dom(渲染)更新( 渲染)、卸载等过程称之为Vue⽣命周期。Vue2生命周期beforeCreate：创建前实例初始化之后，数据观测和事件配置之前被调用，此时组件未创建选项的对象，el 和data 未初始化，无法访问methods， data， computed等上的方法和数据 created：创建前后实例创建完成之后被调用，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/ev

2022-05-09 22:27:02 379

原创微信小程序跳转外部链接

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下：1、配置业务域名[小程序管理后台](https://mp.weixin.qq.com/)——开发(开发管理)——开发设置：新增业务域名![在这里插入图片描述](https://img-blog.csdnimg.cn/6720e773a37447058080fb2264a5b1ef.png)在这里将你需要的外部链接域名配置完之后，再下载校验文件(校验文件需要放到当前域名的根目录下)2

2022-05-07 10:50:53 19093 2

Test-Js-Folder-File

前端纯JavaScript复制系统文件及文件夹，仅限IE浏览器使用

2023-03-28

手把手教你创建前端项目 Vue3 + Ts + vite + pinia

状态管理工具--Pinia Vue-Router4 快速上手指南 VueUse快速上手指南

2022-11-04

nvm-setup安装包

nvm-setup安装包，下载直接安装

2022-09-27

基于Vue3 + Element Plus 的后台管理系统

基于Vue3 + Element Plus 的后台管理系统解决方案该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 Vue3 + pinia，引用 Element Plus 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

2022-07-22