- 博客(63)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 JS 常用插件——下拉刷新、上拉加载，左右滑动，移动端调试，图片预览、放大缩小、旋转
常用插件大全、非常好用、可以达到事半功倍的效果 ~下拉刷新、上拉加载 mescroll上下左右、滑动 better-scroll移动端调试 Vconsole图片预览、放大缩小、旋转 viewerjs对象转URL, 并以&拼接 qs本地存储 storeJS动画库 Velocity.js其他插件，博主会在发现并测试使用后，继续更新，请时刻关注 ~...
2020-03-10 10:59:21
1065
3
原创 拥抱vite + vue3，制作一款属于自己的音乐播放器。
基于 VITE + VUE3 + TS + PINIA + TAILWINDCSS 开发的音乐播放器，界面模仿网易云音乐客户端。
2023-03-18 21:38:25
1785
原创 我的又一个站点 —— vuepress收藏夹
最近看到有些大佬们把常用的网站、库都存储在自己的站点上，于是乎，一个奇妙的想法又诞生了~ 搭建一个博客作为自己的收藏夹。
2022-09-22 15:38:51
316
原创 ios 真机调试遇到的图片问题汇总
ios真机调试遇到的图片问题汇总。图片不显示(已解决)，base64图片过大导致页面卡住(未完美解决)。有没有大佬遇到类似问题的，救救我！😭😭
2022-07-29 12:33:03
1143
原创 封装一个好用的axios，省时又省力，真香！！
简单聊一聊我在项目中是如何封装axios以及如何统一管理api接口，其主要目的是简化代码，使代码结构更清晰，便于后期更新维护。
2022-06-30 22:44:09
1223
2
原创 仿微信@功能
基于vue2.x + vant2.x 实现的@功能(稍作修改即可支持原生js和react)，兼容pc和手机端，如有bug，欢迎提出~
2022-05-25 10:11:43
2528
13
转载 都2120年了，你还不知道VUE3 有哪些 UI框架？
Vue3已经发布一段时间了，版本趋于稳定并且可以用于生产。虽然很多开发人员对这个版本褒奖不一，新版本由于算是重新构建生态系统，相关资源的缺乏。与Vue2丰富的UI框架相比，Vue3就显得有点少，也算是影响开发人员使用Vue3的原因之一。在Vue中使用UI框架是一个很好的组合，因为它使开发人员更加专注抽象通用组件，从而提供了一个可维护的、高效的开发过程。本文推荐几个比较流行的VUE3 UI框架，同时提供出色的开发人员体验，合理利用，又或者学习借鉴都是不错的选择，排名不分先后。Ant Design Vue
2021-09-02 16:32:57
548
原创 vscode插件 — koroFileHeader，用于生成文件头部注释和函数注释
在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！安装vscode 插件市场找到 korofileheader 注释插件，安装即可。配置依次点击 File → Preferences → Settings, 搜索setting.json打开setting.json文件，添加如下配置： "fileheader.customMade": { //此为头部注释 "Description": "", .
2021-07-08 15:16:50
1152
原创 vue3 安装vite并创建项目
Vite 特性使用 rollup按需编译，不会刷新全部DOM开发中热更新冷服务启动。不打包，使用 ES6 import。安装步骤1、安装 Vitenpm install -g create-vite-app2、利用 Vite 创建 Vue3.0 项目create-vite-app project-name3、安装依赖运行项目进入工程项目文件夹cd project-name安装项目依赖npm install运行项目npm run dev...
2021-07-07 15:06:57
1285
原创 Flutter 打包——输入秘钥库口令时，无法打字
flutter打包时，终端无法打字。先做个记录，解决后会更新至此。知道如何解决的小伙伴，麻烦评论留言，万分感谢！！
2021-03-05 13:51:57
523
4
原创 Flutter 加载网络图片——Failed host lookup: ‘ 地址‘ (OS Error: No address associated with hostname, errno = 7）
Image.network加载网络图片无效的解决办法按照学习教程使用Image组件时，发现教程中图片可以显示，而自己的demo却显示不出图片。将图片地址扔到浏览器可以正常访问，神奇了~一、原因分析及解决方案1. 本地没有网络打开百度，如果无法正常显示界面，证明你电脑没有连接网络。2. 没有配置网络权限在android/src/main/AndroidManifest.xml中添加下列代码：<uses-permission android:name="android.permissio.
2021-03-03 16:12:09
6902
2
原创 Quasar 遇到的坑——在axios中使用router.push(‘/‘)路由跳转无效
记录近期使用Quasar的心得及遇到的坑。什么是Quasar？Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的基于Vue.js的开源框架，允许作为Web开发人员的您快速创建多种类型的responsive++网站/应用：SPAs (单页应用)SSR (服务器端渲染的应用) (+可选的PWA客户端接管)PWA（渐进式网页应用）通过Cordova或Capacitor构建移动APP（Android、iOS…）多平台桌面应用（使用Electron）Quasar的座右铭是：编写代码一次并.
2020-11-15 14:02:32
3780
原创 Property ‘$q‘ does not exist on type ‘CombinedVueInstance＜{ ... }Record＜never, any＞& Vue ...Vetur
最近接触了一个vue UI框架 quasar，维护团队非常活跃，有望成为今后UI框架的潮流，推荐大家都可以去试试。根据官方文档创建了一个项目，使用VS Code打开项目（这里要夸一下Quasar团队，把VS Code配置项都列出来了，很贴心，配置VS Code）一、问题描述按照官方Eslint配置配置好后，打开项目，发现 vue<template>中$q出现红色下划线，虽然项目能正常运行，但这个提示一直在，强迫症必须要干掉它。如下图：二、解决办法经过查阅，发现是VS Code语.
2020-10-21 22:46:15
1210
2
原创 谈谈外派某*关2个月的感受
作息时间早9晚5，中午休息1小时（实际情况：11.30就可以去吃饭，午休到1.30都是ok的）各种文档无（无语… ，给国家单位干活都这么敷衍的吗？？？）工作内容反反复复的修改（没有文档，反复修改就显得很正常啦~）加班情况暂时没加过班，基本5.20就可以下班福利待遇外派人员，所以享受不到*关丰厚的福利自我感觉没挑战性，适合养老。其他过多的就不吐槽了，毕竟国家单位。今天的吐槽就到这了~...
2020-10-20 10:31:14
335
8
原创 2020年8月4日——站好rtzh最后一班岗
19年6月24日 - 20年8月4日 ，感谢 rtzh一、公司初印象踏入公司，瞄了几眼，感觉比这些天面试的公司环境都要强。漂亮的前台小姐姐：“您好，请问有什么能帮到您？”我：“我是来面试web前端的。”前台小姐姐：“好的，跟我来，先坐着稍等一下，我去拿一份面试题。”我：“四处张望，还不错，加油，拿下这家。”前台小姐姐：“给您，做好了到前台找我哈。”我：“好的。”… 一些前端基础选择题，so easy 。我：“您好，做完了。”前台小姐姐：“稍等，我去请我们HR来和您谈一会。”HR：.
2020-08-04 17:58:50
941
2
原创 Vue 项目优化——首页内容自定制，开发阶段标题加上 dev - 前缀
开发环境的首页和发布环境的首页展示内容的形式有所不同如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：module.exports = { chainWebpack:config=>{ // 开发阶段 config.when(process.env.NODE_ENV === 'production',con..
2020-07-01 09:21:28
395
原创 Vue PostCss插件——autoprefixer配置完成后无效，已解决
在配置autoprefixer时，按照之前的配置可以成功补全css浏览器前缀，但是结合postcss-pxtorem插件，px可以成功转换为rem，但css前缀无效。经过几个小时的鼓捣，终于让我发现了蛛丝马迹。哈哈哈，很开心，好激动！！一起来看一看博主陷入的困境吧。1. autoprefixer的配置根目录postcss.config.js文件中，配置代码如下：module.exports = { plugins: { 'autoprefixer': { overrid.
2020-06-25 16:13:47
10381
6
原创 Vue PostCss插件——postcss-pxtorem，将像素单位自动转换为rem单位
postcss-pxtorem是一款基于PostCSS插件，用于将像素单位生成rem单位。这款插件能够让开发人员直接按照设计图的尺寸开发，并且能自动将像素单位编译转换成rem。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem，然而每次在制作过程中需要自己计算rem值，非常不便。接下来介绍一下postcss-pxtorem的使用。一、postcss-pxtorem 配置步骤1. 安装postcss-pxtorem依赖cnpm install postcss-pxtorem --s.
2020-06-25 14:18:20
3166
原创 Vue PostCss插件——autoprefixer，自动补全css浏览器前缀
Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。可以实现css3代码自动补全，也可以运用到sass、less中前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。Au.
2020-06-25 13:54:47
26590
3
原创 Vue 项目优化——如何查看是否已开启Gzip压缩
Gzip压缩——减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。一、打开控制台Chrome浏览器F12打开控制台，进入调试界面二、在表头单击鼠标右键如下图：勾选Content-Encoding后，在表头会多出Content-Encoding这一列，用于判断是否开启Gzip三、未开启Gzip如未开启Gzip，Content-Encoding是空值。如下图：四、已开启Gzip如已开启Gzip，Content-Encoding会显示gzip.
2020-06-25 13:26:40
2784
原创 Vue 项目优化——路由懒加载的配置
路由懒加载：当路由被访问时才加载对应的路由文件当打包构建项目时，JavaScript包会变得非常大，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。具体步骤：1 安装 @babel/plugin-syntax-dynamic-import打开Vue可视化面板，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import点击安装。2.在babel...
2020-06-24 15:22:02
493
原创 Vue 项目优化——通过externals加载外部CDN资源，提高网页效率
默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件(js/chunk-vendors.******.js)中，从而导致打包后单文件体积过大的问题。一、如何解决上述问题我们可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，最终都不会被打包。通过排除这些包减小js/chunk-vendors.******.js文件体积。原理：打包期间，webpack会先检查externals 中是否声明第三方依赖包.
2020-06-24 15:12:50
2068
原创 Vue 项目优化——为开发、发布模式指定不同的打包入口
默认情况下，vue项目的开发模式和发布模式，共用同一个打包的入口文件(即src/main.js)，但是开发阶段和上线阶段代码往往会有细微的差别。一、为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件：发开模式的入口文件为：src/main-dev.js发布模式的入口文件为：src/main-prod.js默认情况下，vue-cli3.0生成的项目，隐藏了webpack配置项，如果我们要配置webpack,需要在项目根目录中创建vue.config.js文件来配置.
2020-06-21 13:46:09
831
原创 gulp unable to minify JavaScript
gulp 用自动化构建工具增强你的工作流程！前端开发中，之前使用gulp打包的时候一直很顺利，但今天打包压缩js时，出错 ，错误提示：unable to minify JavaScript。度娘搜索了一圈，尝试了其他博主的方法， 并没有解决我的问题。gulpfile.js中代码：gulp.task('js', function () { return gulp.src('src/js/*.js') // 找到目标原文件，将数据读取到gulp的内存中 .pipe(concat('bui.
2020-06-17 10:35:09
738
原创 Vue 项目优化——生成打包报告
生成打包报告命令行形式生成打包报告vue-cli-service build --report通过vue-cli的命令选项可以生成打包报告--report选项可以生成report.html 以帮助分析报告内在vue控制台生成打包报告点击任务=>build=>运行运行完毕, 点击右侧分析，控制台面板查看报告通过控制台和分析面板，可以方便的看到项目中存在的问题...
2020-06-16 09:01:33
1617
原创 百度地图 省份/城市边界描边处理，省市外添加半透明遮罩，河北省特殊处理
项目中有这样一个需求，使用百度地图，对河北省省边界进行描边，省份以外添加半透明遮罩。一、setTimeout(function(){ // 省/市外 添加遮罩 getBoundary('河北省');}, 1000);//指定省市进行描边处理，省市外进行半透明遮盖。function getBoundary(city){ var bdary = new BMap.Boundary(); bdary.get(city, function(rs){//获取行政区域 .
2020-06-09 10:17:56
3976
3
原创 Vue 项目优化——移除console
插件 babel-plugin-transform-remove-console安装依赖npm install babel-plugin-transform-remove-console --save-dev在babel.config.js进行配置关键代码// 这是项目发布阶段需要用到的 bable 插件const prodPlugins = []if (process.env.NODE_ENV === 'production') { prodPlugins.push('trans.
2020-06-08 18:37:03
2578
原创 Vue 项目优化——使用nprogress添加进度条
NProgress安装依赖npm install --save nprogress在main.js中导入 js、css在main.js拦截器中配置, 展示/隐藏进度条关键代码// 导入进度条NProgess 的对应的js、cssimport NProgress from 'nprogress'import 'nprogress/nprogress.css'// 添加 request 请求拦截器 - 展示进度条 NProgress.start()axios.int.
2020-06-04 11:02:27
470
原创 优快云 设置代码块风格、显示的颜色
优快云 代码块风格修改笔者在编写优快云博客时，遇到这样一个困惑，优快云默认代码块的主体风格中，背景色为黑色，但注释颜色偏灰色，导致注释给人一种永远看不清的感觉。于是乎，开始寻找修改代码主题的办法。终于，还是被我发现了， 哈哈哈 ~步骤：找到右上角头像区域，点击管理博客，如图在左侧侧边栏中，找到管理博客，如图图中箭头指向 → 代码片样式，选择自己喜欢的主题，点击保存即可...
2020-04-30 10:33:14
2397
1
原创 Axios vue中Axios封装和API接口管理，单一、多个域名封装
二、 多域名接接口封装以下转载自掘金一位大佬，附链接：vue中Axios的封装和API接口的管理axios的封装根据需求的不同而不同。这里非常感谢评论里一些很中肯的建议，我也对此进行了思考和针对不同需求的改善。主要有以下改变：优化axios封装，去掉之前的get和post断网情况处理更加模块化的api管理接口域名有多个的情况api挂载到vue.prototype上省去引入的步骤h...
2020-04-29 16:43:56
1667
1
原创 Vue ElementUI——Form表单自定义校验规则遇到的坑
初次使用 ElementUI，发现很多需要注意的点，一不留神就会出现自己给自己埋下的坑。本次主要讲解 Form 表单中，自定义校验规则中的注意点。先来看一下埋坑代码以上代码是ElementUI中自定义校验手机号的使用，此时代码不会报错，但在提交表单时，用到validate方法对整个表单进行校验，会发现这个方法不会执行，百思不得姐啊。。接下来一起来填坑自己埋下的坑，自己总要解决的 ~...
2020-04-11 12:59:23
6416
原创 eslint 在vscode中的配置项 setting.json 修改
vue 项目中，eslint 校验会使 vue项目报错，通过配置 setting.json
2020-04-06 11:12:54
4351
1
原创 Vue 安装Element-ui 报错 this dependency was not found：'element-ui/lib/theme-chalk/index.css'
安装Element-UI前一天刚安装好的Element-ui，第二天竟然打不开了！ 项目代码没改，也没关闭编译器。是不是很神奇 ！！报错内容：This dependency was not found:* element-ui/lib/theme-chalk/index.css in ./src/main.jsTo install it, you can run: npm instal...
2020-03-02 15:50:34
2174
原创 CSS flex弹性盒子布局总结
说明：/* * @author luzzz * Q:1141178844 WX:18335918153 * l:主轴 z:交叉轴 */.flex-box display:flexdisplay: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-...
2020-02-29 17:05:27
274
原创 CSS 双击页面，出现蓝色背景解决方案
双击页面时，会出现蓝色背景，此时可在css添加如下样式即可解决此问题。-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;...
2019-11-12 10:33:10
2179
qq动态表情包gif格式_新版&旧版&搞笑版，拿来即用的emoji
2020-06-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人