前端开发爱好者—

原创 Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架【值得收藏】

由于 vue3.2 版本的发布，<script setup> 的实验性标志已经去掉，已经陆陆续续有不少公司开始使用 vue3.2开发项目了。这篇文章就来帮助大家如何快速使用 vue3.x，typeScript， vite 搭建一套企业级的开发脚手架 ????

2021-12-04 21:13:34 4162 6

原创基于 H5 Canvas “指纹识别“ 技术【浏览器指纹 VS Canvas指纹】

哈喽,大家好我是xy????????‍????. 作为一名前端开发工程师,应该都用过H5中的canvas吧!!! 但是你真的了解它吗？Canvas '指纹识别'技术又是什么？本文将由浅入深，带你了解Canvas '指纹识别'技术什么是 CanvasCanvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 <canvas><

2021-11-21 19:54:00 2313

原创史上最全前端学习路线一条龙【内含入门到进阶到高级精选资源无套路获取】

大家好，我是xy，写了好几天，终于在今天完成啦！可以堪称是史上最贴心的前端学习路线了，帮助大家少走弯路，急速超车???? + ???? = ???????? 如果觉得这个超车路线有帮助到你，记得 ⭐️关注⭐️ 我哦，我的公众号：前端开发爱好者。一大波学习资源即将来袭，收藏保存吧????????????前言经常有同学会问我，学到什么程度可以找到一份前端工作，或者会问如何入门前端，学习到什么程度可以胜任业务开发以及前端如何进阶等问题。别急！！！下面我们来把前端学习分为几个阶段，帮助你如何从一个小白成为前端

2021-11-03 21:50:29 699

原创 12道 javaScript 经典逻辑题，是否承载着你的回忆

大家好，我是xy。如何让 js 变得好玩呢？今天给大家分享 12 道 js 比较经典的逻辑题，在初学代码时，可是被这些逻辑题玩的头晕眼花????，下面大家和我一起动动聪明的小脑瓜吧????。1.计算 2 的 n 次幂，n 可输入，n 为自然数。var n = parseInt(window.prompt('input'));var mul = 1;for (var i = 0; i < n; i++) { mul *= 2;}document.write(mul);2. 计算 n

2021-11-03 21:41:36 2485 1

原创 130+Hooks,解锁react hooks使用的正确姿势

为什么会有 Hook介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。。但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点，简单列举几条纯函数组件没有状态纯函数组件没有生命周期纯函数组件没有this只能是纯函数这就注定，我们所推崇的函数组件，只能做UI展

2021-10-17 22:05:22 3353

原创【前端搞地图】如何设计一张更真实的 3D 地图

????【前端搞地图】系列第三弹来啦，今天给大家带来的是如何实现更真实的 3D 地图。在前两篇文章中我们大致讲解了Mapbox的基础使用以及如何去设计一张高度可自定义的地图,还没有学会的小伙伴可以查看前两篇文章，自己动手实操下，这里就不对基础做过多的介绍了。这篇文章主要讲解Mapbox Gl Js赋予地图的3D能力，如何实现更真实的 3D 地图。Mapbox GL JSMapbox GL JS 是一个用于 Web 上矢量地图的 JavaScript 库。它的性能、实时样式和交互性功能为任何人在web上

2021-09-25 18:57:49 3834

原创【前端搞地图】如何设计一张让用户过目不忘的地图-2

前言????【前端搞地图】系列第二弹来啦，今天给大家带来一款地图设计神器，可以称作是地图界的ps。这款神器就是 Mapbox Studio。在之前的一篇文章中简单讲述了Mapbox的简单使用，需要学习的小伙伴可以自行查看，这篇文章主要来介绍Mapbox Studio的用法。效果Mapbox Studio 是什么？地图界的ps``地图界的ps``地图界的ps , 重要的事情说三篇，你如果不知道ps是什么，那我就没辙了，废话不多说，先来看看这个ps长什么样吧！！！好了，下面正式开始画图吧

2021-09-04 21:48:20 665

原创【前端搞地图】如何设计一张让用户过目不忘的地图-1

背景最近公司准备开发一款大屏可视化应用，主要想用来展示公司客户的一些数据情况以及用户区域分布情况。大体就是左右两边放置一些数据图表，中间放置一张科技感很强的地图。数据图表开发我想对于一般前端来说肯定都是很简单的需求了，但是中间地图，需要做到自定义。从目前团队来说，大家都比较缺乏gis开发经验，接到需求的那一刻大家也是对地图开发做了一番调研。可视化地图开发调研集合众人之力，一开始预定了几个方案：百度地图：可定制样式，但是可自定义样式比较少，不能满足目前需求高德地图：可定制样式，和百度地图类

2021-09-04 21:45:41 2391

原创 github、npm、Stack Overflow...... 一键加速【支持多平台】

作为一名开发者，经常需要到各大论坛或某些国外的网站查找一些资源，但是限于国内网络因素，经常会出现访问慢或者直接打不开的情况，就比如全球最大的程序员交友网站github,经常会出现打不开的情况或者某些图片加载不出来的问题。本人也是为这个问题头疼了好长时间。关注wx公众号: 前端开发爱好者回复一键加速获取加速神器，帮你解决网络慢和卡段问题，告别996特性1、 dns 优选（解决***污染问题）根据网络状况智能解析最佳域名 ip 地址，获取最佳网络速度解决一些网站和库无法访问或访问速度慢的问题.

2021-08-29 21:29:40 1251 1

原创 ES6 reduce 减少你的面条式代码【初中级前端必会】

前言最近和同事 A 聊天聊到es6一些基础知识，在问到reduce时，同事给我的回答是：‘不就是用来求和的吗’ ？？？ ‘你确定？？？’应该有不少童鞋肯定也是这样认为的吧，因为在一般基础性的教程中，举例最多的就是数组求和。其实reduce还要很多妙用。下面我们就来看看神奇的reduce介绍reduce()方法可以搞定的东西，for 循环，或者 forEach 方法有时候也可以搞定，那为啥要用 reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很

2021-08-15 17:07:09 206

原创前端2021的新趋势，由扁平化到新拟态的运用【新拟态个人小破站】

开局一张图什么是新拟态 ?「新拟态」英文名Neumorphism，也有设计师称为 Soft Ui（软 UI）。起因是源于 2019 年 11 月 5 日，来自乌克兰的设计师 Alexander Plyuto 在追波和 ins 上发布了下图的一张作品，作者说明信息：“让我们想象一下，如果在移动界面设计中，投影的形式发展的更好的话，那将来的界面将会是什么样的，这是我的愿景。”，一时间广受设计师追捧，“新拟态”风潮迅速风靡各大设计网站，简单来说就是一种类似浮雕的效果，介于扁平与投影之间，它是一种使用对象阴

2021-08-15 17:04:06 697

原创 Taro3.x 快速开发微信小程序以及 minidebug 小程序调试工具使用

前言最近公司准备开发一款扫码开票类型的微信小程序，时间紧，任务急。第一反应就是打开小程序开放平台查看开发文档，哦豁，官方的组件也太少了吧，难道要自己手写吗？经过多方调研，了解目前市面上比较流行的小程序开发框架有 Uniapp、Taro 。因为目前公司技术栈完全使用的 react hooks + ts 开发，所以在框架选择上自然就选择了 Taro 。Taro 简介Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝

2021-08-15 17:00:27 2697

原创基于qiankun的微前端最佳实践 -（同时加载多个微应用）

介绍 qiankun在正式介绍 qiankun 之前，我们需要知道，qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。微前端的概念借鉴自后端的微服务，主要是为了解决大型工程在变更、维护、扩展等方面的困难而提出的。目前主流的微前端方案包括以下几个：iframe基座模式，主要基于路由分发，qiankun 和 single-spa 就是基于这种模式组合式集成，即单独构建组件，按需加载，类似 npm 包的形式EMP，主

2021-08-15 16:53:14 7790

原创 IONIC 打包安卓 apk 以及生成签名的 apk 详细过程 ( 配资源链接和图文 )

1.基本的依赖环境 Node.js、Jdk、SDK、Gradle Jdk,sdk,gradle 百度网盘下载地址 : https://pan.baidu.com/s/16MvuV9Nlq-SCCnyGYBYiPQ2.环境配置 1.node.js (直接官网下载安装就可以了, 在cmd中 node -v 检测是否安装成功) 2.Jdk配置: ...

2018-11-01 16:04:51 649

原创【VUE】vue-awesome-swiper 使用总结以及解决在vue中不自动轮播的问题

1.首先安装 vue-awesome-swiper (安装前首先按照nodejs,vue)npm install vue-awesome-swiper --save2.在main.js中引入安装的依赖import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/di...

2018-09-28 13:38:19 8269 1

原创【VUE】基于VUE的图片预览插件 vue-photo-preview

使用方法:1.安装npm install vue-photo-preview --save2.在 main.js 中引入配置文件import vuePicturePreview from 'vue-picture-preview'Vue.use(vuePicturePreview)3.在根组件App.vue中添加 <lg-preview></lg-p...

2018-09-20 15:22:32 7918 5

原创 vue项目 npm run build 后打开 index.html 空白,某些图片字体文件加载不出来解决办法

1、修改config下面的index.js中bulid模块导出的路径 build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist')...

2018-08-29 11:00:55 3091

原创【axios】axios 用法详解 --------vue2.0学习

功能特性:在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API 拦截请求和响应转换请求和响应数据自动转换 JSON 数据客户端支持保护安全免受 XSRF 攻击用法:1.安装axios npm install axios --save-dev2.在main.js中引入axiosi...

2018-08-03 09:33:57 270

原创 javascript实现移动端触屏拖拽功能,拖拽移动

HTML: <body> <div id="div1"> </div></body>CSS:<style media="screen"> * { margin: 0; padding: 0; } h

2018-07-31 15:41:02 2532

原创 Vue 中类似qq聊天窗口滚动条一直处于底部

mounted () { this.scrollToBottom();},//每次页面渲染完之后滚动条在最底部updated:function(){ this.scrollToBottom();}, methods: {// scrollToBottom() { this.$nextTick(() => { var c...

2018-07-31 14:59:36 3211 5

原创 VSCode 实用插件

1.Bracket Pair Colorizer (括号增强插件);2.Path Intellisense (用于提示带入文件时候的路劲)3.VSCode-icons (用于项目中文件类型显示对应图标)4.beautify (代码格式自动美化)5.Document this (快速注释)6.mode power (代码书写动效)...

2018-07-27 14:07:16 187

原创【沉浸式状态栏】Hbuilder打包app，设置沉浸式状态栏

在mainfest.json的plus中以下位置添加statusbar内容:"plus": { "statusbar":{ "immersed": true/*沉浸式状态栏*/ }, "splashscreen": { "autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭...

2018-07-05 15:31:28 2359

qq_39398332的博客