- 博客(75)
- 收藏
- 关注
原创 vite5+vue3+Ts5 开源图片预览器上线
一款Vue3的轻量级图像查看器,它基于Flip动画技术,支持PC和h5移动网页预览照片,如果它是Vue3开发的产品。
2024-12-05 11:09:54 922
原创 Nuxt3配置局域网和移动端访问
这样配置的好处是,处于开发环境时,同一个局域网的其他伙伴可以通过IP地址+端口号访问nuxt项目,方便其他人预览项目效果和进度。
2024-12-03 17:27:10 188
原创 vue3+vite5.0部署注意这些配置,Easy to run!
vite5.0简化了很多配置,不过也带来了很多丰富的插件,用起来更酸爽。不过任然需要注意一些细节。部署前像下文这样配置,方便观察项目状态,也利于维护和调试。这将用到vite.config.js配置文件,启动命令配置package.json,还有全局配置文件.env。这些文件搭配使用才能满足项目常规配置需求,比如项目根路径、项目打包时间,项目版本信息。
2024-05-21 16:56:47 1680
原创 “治疗“xss攻击的“特效药“:DOMPurify,让HTML更安全
跨站脚本(XSS)攻击是一种常见的网站安全威胁,它通过将恶意脚本注入到网站中以窃取用户数据或利用用户的身份执行未经授权的操作。DOMPurify 是一个能够帮助前端开发者避免 XSS 攻击的 Javascript 库。DOMPurify是一个用于清洗和消毒HTML、MathML和SVG的小型和快速的库。它的目的是防止跨站脚本攻击(XSS),并确保提供的HTML是安全的,可以在网页中插入使用。
2024-05-17 09:54:19 2120
原创 npm常用命令以及运行环境检测,前端必学
npm是Node Package Manager(Node包管理器)的缩写。它是一个用于安装、管理和共享JavaScript代码包的命令行工具和注册表。npm是JavaScript世界中最大的软件注册表,拥有超过100万个代码包,开发者可以通过npm下载和安装这些代码包,以便在自己的项目中使用。npm还提供了一些功能,如版本管理、依赖关系管理、脚本执行等。它是Node.js生态系统中非常重要的工具之一。重要关联文章配置nvm管理nodejs版本的环境详细教程【window版】
2024-04-17 14:58:19 1064
原创 clipboard好用的复制剪切库
clipboard是现代复制到剪贴板的工具,其 gzip 压缩后只有 3kb,能够减少选择文本的重复操作,点击按钮就可以复制指定内容,支持原生HTML+js,vue3和vue2。使用方法参照官方文档,so easy!!!
2024-03-18 17:48:02 444
原创 配置nvm管理nodejs版本的环境详细教程【window版】
nvm( node.js version management) 是 Windows 系统下的一个 Node.js 版本管理工具,它是 Node Version Manager(nvm)的 Windows 版本,它是基于GO语言开发的工具。该工具允许你在 Windows 系统上轻松地安装、切换和管理多个 Node.js 版本。这对于开发人员来说是一个非常有用的工具,因为不同的项目可能需要不同版本的 Node.js。
2024-03-07 16:27:18 2667
原创 window11 更改 vscode 插件目录,释放C盘内存
由于经常使用vscode开发会安装一些代码提示插件,然后C盘内容会逐渐缩小,最终排查定位到vscode。这个吃内存不眨眼的家伙。vscode默认安装插件目录如下:。
2023-10-29 13:35:51 1516
原创 qnyutils工具库是基于纯JavaScript开发的,后续会扩展支持typescript。
前端项目开发常用js工具类,包括手机号码身份证验证中文校验获取日期和根据日期格式获取日期或者转换日期格式对象数组根据key分组邮箱格式校验获取历史时间时间差数组去重多个对象数组去重等工具方法,减少多余包引用,增加工具类复用性,提高开发效率。
2023-08-21 15:03:29 399
原创 npm login登录失败解决办法,亲测好用
http:// server:port【IP+端口】 代表登录代理服务器,就是梯子,npm官网属于外网,如果不能正常登录时就需要使用梯子访问。登录npm成功后,可以愉快的发布任意包了。输入上面命令,回车,惊奇发现登录成功了。
2023-08-17 15:28:19 2953
原创 CSS3_03:各种卡券优惠券模板制作,开箱即用,学得会,用得着
css的径向渐变、线性渐变和遮罩mask实现各种卡券优惠券模板,开箱即用,学得会,用得着。
2023-06-15 14:23:16 843
原创 CSS3_01:玩转文字渐变特效动画,这篇文章满足你,实现方式+案例完整源码
这里后面会陆续出一个关于css动画系列文章,关注布衣前端,实时获取。在前端开发过程中,有时候需要特别显示页面某个文字特效,这时普通的文字颜色或者阴影已经无法满足需求。此时,css的线性渐变就派上用场了。文字渐变用到的css技术栈最终效果动态图片仔细看,一共五行文字,第一行是普通文字没加任何特效,第二行时线性渐变的角度补间动画效果,从0deg到330deg,顺时针方向的效果,当然可以改成逆时针,呈现另一种效果。最后一行文字是利用盒子背景中心位置产生的特效。
2023-06-12 10:05:18 1479 2
原创 Vue多层数据结构响应式失效,视图更新失败
在表单设计和流程设计时,碰到多层数据响应式失效问题,当时也是一脸懵,找不到错在哪里,运行代码不报错,就是不能响应式更新视图了。特此记录一下填坑过程。
2023-03-16 14:13:31 1421
原创 css3多种径向渐变函数重叠实现小圆圈特效
日常前端开发中,离不开花样繁多的css3渐变特效ui,今天和大家分享一哈,css3多种径向渐变函数重叠实现小圆圈特效。好了今天分享到此结束了,更多关于css3渐变视频教程请前往布衣前端独家B站查看。
2022-12-15 20:03:32 645
原创 git更新用户名和密码
git查询用户名git config user.namegit查询邮箱git config user.emailgit修改用户名git config --global user.name "xxx"git修改邮箱git config --global user.email "xxx@qq.com"
2022-05-09 14:33:17 2477
原创 npm和nrm常用命令
npm 常用命令1、安装所以依赖到你的项目 1. npm install2、根据包名和指定版本号安装依赖npm install xxx@3.2.1npm install xxx@latest // 安装包的最新版本3、根据范围安装-D 是在开发环境中协助开发需要使用的,-S是生产环境打包时需要的,-g是全局安装依赖,在package.json中 -D在devDependencies对象中,-S在dependencies对象中 npm install xxx@3.2.1 -D/-S/-g
2022-03-29 15:25:52 1722
原创 uniapp的web-view 无法自由缩放(已解决)
废话不多说,直接上代码参考官方网址:https://uniapp.dcloud.io/component/web-view.html#web-view参考代码:<template> <view> <web-view :webview-styles="webviewStyles" :src="url"></web-view> </view></template><script> let wv; expor
2022-03-22 15:10:51 3162 1
原创 vue项目安装scss
命令npm i sass-loader@7.3.1 -Dnpm i node-sass@4.14.1 -Dnode和scss版本依赖关系
2022-03-17 14:51:15 9997
原创 解决windows10启动报错Win32Bridge.Server.exe函数不正确
在搜索栏中输入命令提示符,右键以管理员身份运行, 以下命令必须一条一条执行完后在执行另外一条。1、在搜索栏中输入命令提示符,右键以管理员身份运行,键入以下命令:Dism /Online /Cleanup-Image /ScanHealth这条命令将扫描全部系统文件并和官方系统文件对比,扫描计算机中的不一致情况。2、这条命令必须在前一条命令执行完以后,发现系统文件有损坏时使用。Dism /Online /Cleanup-Image /CheckHealth 3、这条命令是把自己电脑系统损坏.
2021-09-16 20:35:43 27028 4
原创 CSS常用知识点:盒子内容设置滚动方向
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子内
2021-07-07 00:15:10 1169
原创 idea2020修改maven项目包
本次文章是基于若衣前后端分离版本进行修改的哦1、修改总目录名称,在项目打开之前更改为好,因为打开的项目重命名会出现[ ].修改pom.xml 的name属性最后刷新maven2、修改子模块名称2.1 点击之后出现这样弹窗,点击默认项,会自动改模块名称和磁盘目录名称2.2 然后改成自己需要的模块名称2.3 修改模块坐标名称和模块名称一致2.4 修改原模块名称,file–>project-structure-project, 找到对应的原模块名称进行修改,点击应用即可.
2021-06-09 09:12:18 547 2
原创 vue+css左边三角形的矩形完成自定义流程图(可扩展)
组件用到所有图标都来自阿里云iconfont效果图效果图1、页面<template> <div class="custom-map-for-approval"> <h2 class="map-title">审批进度</h2> <template v-if="nodeList && nodeList.length > 0"> <div class.
2021-05-11 14:13:08 1220 1
原创 vue2自定义流程图组件(vue+css3+html)
来由:项目用的是iview组件库进行开发的,但是它的时间轴组件无法满足项目复杂需求,所有特意自定义这个新的流程图组件注意:所有图标是阿里云iconfont图标库页面<!-- 自定义流程图 --><div class="new-approval-map"> <h2 class="map-title">审批进度</h2> <div class="map-node"> <div class="map-.
2021-05-10 11:17:12 4169 2
原创 vue中使用原始transition时注意事项
注意在使用原生transition时不要用v-if,用样式控制为佳,否则使用vue封装动画组件transition即可;1、页面<div :class="['depart_tree', {'active': expandFlag} ]" > <div :class="['tree_list']" > <Tree ref="company_tree" :data="deptList" @on-select-change="getDepart".
2021-05-06 10:05:35 246
原创 uniapp使用vuex的modules模块,包括mapState, mapGetters, mapActions, mapMutations
首先在uniapp官网已经内置了vuex,我们只要引用即可,uniapp-vuex说明1、分别创建根路径下store文件夹,里面放置index.js,并在store文件夹里在创建一个modules文件夹,内部放置moduleB.js和user.js文件index.js文件import Vue from 'vue'import Vuex from 'vuex'// 导入模块import user from '@/store/modules/user'import moduleB from.
2021-04-20 10:48:51 3595
原创 git提交tag细节以及常用命令
看来网上很多的git提交tag文章,觉得有必要自己总结一哈,方便后期查看。git提交tag的主要好处是后期版本出错了可以回滚版本。这是真的香啊。
2021-04-13 19:28:10 3829
原创 利用npm仓库发布并使用自己的js工具类
**1、**登录npm官网,注册一个npm账号,然后注册完后,官网会给你发送相关的邮件,你去你的邮箱根据提示进行操作,验证通过即可,邮箱一定要通过验证,否则发布版本时会报错。2、制作一个npm的包2.1、创建一个文件夹,如:qnyutils2.2、进入文件夹qnyutils,执行命令:npm init,在此过程中你可以一路回车,那么此时你的包名跟你的文件夹名字一样,即:qnyutils,同时生成package.json 文件2.3、在文件夹 qnyutils 下创建一个 index.js 文件,
2021-03-22 22:44:43 769
原创 vscode 必装插件和函数跳转方式
vscode 必装插件vscode必装插件:1、文件图标:Material Icon Theme2、html5模板:HTML Snippets、Mithril Emmet3、vue插件:Vetur、Vue 2 Snippets,vue-helper(支持CTRL+点击函数跳转 || 绑定对象跳转)4、{}括号优化插件:Bracket Pair Colorizer5、主题:Tokeyo Night (东京之夜)6、标签自动补齐:Auto Close Tag7、vue输入组件名自动导入
2021-01-29 14:56:32 18454
原创 centos7.3中nginx配置ssl证书,实现https访问网站
1、购买阿里云SSL证书(网上有很多教程,这里不做赘述)2、ssl证书控制台申请,绑定已有备案域名,跟着提示做即可,证书审核通过后会出现如下界面根据自己的需要下载对应的ssl证书配置即可,这里我选择的nignx配置ssl证书3、将下载好的ssl证书上传到服务器,放到自己想放的文件夹4、在nginx的nginx.conf配置文件中配置443端口服务server { listen 443 ssl http2 default_server; listen
2021-01-04 22:28:24 690 3
原创 centos7.3服务器docker安装MySQL并使用
centos7.3服务器docker安装MySQL并使用navicat链接数据库1、docker镜像搜索MySQLdocker search mysql解释:stars是受欢迎数量,offici: 是ok的话表示mysql官方镜像,否则不是2、下载MySQL镜像docker pull mysql3、查看MySQL镜像docker images4、启动MySQL镜像docker run -p 3306:3306 --name mysql02 -e MYSQL_ROOT_PASSWORD=
2021-01-02 12:51:00 123
原创 阿里云centos7.3安装并使用docker
docker能拉取官方MySQL、redis、tomcat等镜像,为服务搭建提供了遍历。那么如何在阿里云centos服务器安装并使用docker呢。不要捉急,跟着下面操作一步一步来。注意事项:安装docker我实在root目录下1、为了方便,这里我关闭了服务器的 防火墙,在安全组开发端口即可访问;2、检测服务器内核// 版本必须在3.10 以上才行uname -r3、安装dockeryum install docker4、操作docker// 启动dockersystemctl st
2020-12-31 17:34:34 175
原创 阿里云centos7.3服务器的防火墙设置命令
1、查看防火墙状态命令// 回车如果市not running,则说明防火墙已经关闭firewall-cmd --state2、关闭防火墙systemctl stop firewalld.service3、启动防火墙systemctl start firewalld.service4、重启防火墙systemctl restart firewalld.service5、防火墙设置开机自启动设置开启/禁止systemctl disable | enable firewalld6、查
2020-12-29 23:05:31 260
原创 vue的mixins模块使用,提高组件函数和数据的复用性
注意事项:vue的mixins模块相当于组件属性和函数的扩展,可以被组件共用。使用mixins页面还可以有自己的方法和属性,当属性名同名时优先使用引用页面的属性,也可以在mixins进行扩展。提高多页面多组件属性和函数的复用性。mixins:被执行的顺序:优先执行引用它的页面同名方法,然后在执行引用页面的方法使用方法:1、创建mixin.js文件import { initQueryParams } from '~script/index';export default { data() {
2020-12-24 17:14:51 293 2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人