- 博客(30)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 微前端-qiankun
微前端-qiankun的使用qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun官网：Go当使用 iframe 整合系统时，假设我们有系统 A, 当我们想把系统 B 引入 A 系统时，只需要 B 系统提供一个 url 给 A 系统引用即可，这里我们把 A 系统叫做父应用，把 B 系统叫做子应用。同样的，微前端也延续了这个概念，微前端在使用起来基本和使用 iframe 一样平滑。分为：主应用(父)，微应用(子)..
2022-07-11 11:19:51
10320
原创 webpack plugins
前言：plugins：插件在vue项目开发中，通常在vue.config.js中会配置webpack的相关配置其中在plugins中配置相关的插件plugins:[ new xxx(), // 使用相关插件 new xxx(), ...]自定义插件官网介绍核心plugins钩子：compiler 和 compilation 对象理解：Plugin通过访问Compiler和Compilation对象来完成工作。一、compiler是webpack的入口执行实例，其主要功能是监
2022-05-12 16:14:17
1259
原创 Vue3+Vite+Ts开发总结
Vue3 < script setup > 语法糖官网地址：Go响应式变量<script setup> // 个人认为响应式变量和普通变量的最大区别是：响应式变量会同步更新视图模板中的显示，但是普通变量更改后不会触发视图更新 import { ref, toRef, toRefs, reactive } from 'vue'; const num1 = ref(0); // 任意数据类型的响应式变量 const num2 = reactive({ num:
2022-04-13 17:42:17
4189
原创 npm一次性执行多条命令
npm一次性执行多条命令需求场景一套代码需要按照不同场景分别进行打包，每次都要执行对应的命令，有几条就要执行几次（手表示不想动）如何解决：一、npm并行or继发npm脚本里面需要执行多个任务，那么需要明确他们的执行顺序并行执行（即同时的平行执行），可以使用&符号；继发执行（即只有前一个任务成功，才执行下一个任务），可以使用&&符号。// package.json sciptes中添加两个打包环境的命令案例1：并发"build:all": "vue-cli-s
2022-03-30 14:47:08
2982
1
原创 Windows服务器部署前端vue项目
阿里云Windows服务器部署前端vue项目准备工作下载node.js（略）http://nodejs.cn/download/下载Nginx http://nginx.org/en/download.htmlNginx安装启用方法参考：参考1、参考2注意：刚下载完Nginx后，没有配置环境变量的情况下，需要去Nginx文件下使用命令窗口操作Nginx下载完后是这样子把打包好的dist文件放入html目录下找到conf/nginx.config文件，用文本方式打开，进行
2022-03-03 14:47:46
17019
6
原创 Vue SEO优化--预渲染(prerender-spa-plugin)
Vue项目做SEO优化之–预渲染前言SPA：（Single Page Application：单页应用程序）SEO：搜索引擎优化（Search Engine Optimization,SEO）是一种通过了解搜索引擎的运行规则来调整网站，以提高目标网站在有关搜索引擎内排名的方式预渲染：无需服务器实时动态编译，采用预渲染，在构建时针对特定路由简单的生成静态HTML文件，加载应用程序的路由时，将结果保存在一个静态的HTML文件中Vue项目作为SPA项目，只有第一次会加载页面，以后的每次请求，仅仅是获取
2022-01-25 16:48:41
1698
原创 vue使用sass以及如何选择版本
vue使用sass以及如何选择版本在vue项目开发过程中，难免要使用到像sass或less这样对于css的脚本语言但是对于新手来说，如何使用却犯了难题，安装各种后各种报错等…接下来帮你缕清思路前言：vue中欲想使用sass，需要依托于node-sass运行，也就是说sass不能在vue中直接使用，需要借助node-sass来运行(tips：node-sass的运行环境是node)，所以说需要下载sass-loader和node-sass两个包npm install --save-dev sas
2021-12-29 17:36:26
12098
8
原创 初识webpack打包
初识webpack打包，小白入门前言：webpack是一款基于node的构建工具，其中一大特色就是打包因为现在前端已经工程化开发，写的代码已经不能直接在浏览器上运行了这时候webpack会帮你把代码进行编译，打包成浏览器识别的js文件而你需要做的就是配置打包参数，然后引入打包好的js文件运行即可(当然这一步webpack也帮你做好了)开始创建demoTips：接下来我们会创建几个js文件，用webpack打包后使用生成的js文件，使得html正常在浏览器显示mkdir webpack-d
2021-12-28 16:38:18
1886
2
原创 一个项目用Git分别上传多个平台(github、gitee、gitlab)
用Git将项目分别上传多个平台(github、gitee、gitlab)假设有一个项目A，现需要将项目A分别上传GitHub、Gitee、GitLab三个平台前提：下载Git步骤：本地设备（自己的电脑）生成一对秘钥：1）Windows系统一般在C:\Users\admin.ssh下有一个.ssh文件，进去后右键点击Git Bash Here，弹出Git命令窗口2）绑定账户：git config --global user.name "xxx"git config --global us
2021-12-17 18:47:10
3705
原创 Excel转HTML并生成JSON数据
首先我在这里用的是xlsx一、假设有一个xlsx文档二、点击文件=>另存为三、选择网页文件四、就生成了这样的文件，双击点开就运行在了浏览器五、在浏览器上就是这个样子，鼠标右击点击检查六、找到table，鼠标右击选择Edit as HTML就可以选中了，Ctrl+A全选、Ctrl+C复制七、在桌面新建一个 .html 的文件夹，将内容复制进去<!DOCTYPE html><html lang="zh"><head> <me
2021-03-24 15:07:14
307
原创 axios上传文件接收不到、为空
axios上传文件一般来说需要转FormData格式let fileData = file.file; // 拿到file后，转为FormData格式，这样再发送给后端就可以了let formData = new FormData();formData.append("token", that.token);formData.append("img", fileData); api_setUploader(formData) // 发起请求(此处的axios做了封装) .then((res
2020-08-29 09:36:43
3117
转载 SPA、SEO、SSR和vue开发项目是框架的选择
SPA、SEO、SSR开场白：使用Vue做官网时，如果官网需要搜索引擎能够搜索到就用nuxt框架，不让爬虫趴取数据时用cliSPA：介绍：SPA全称是 single page application (在百度百科和一些文章中使用的是 single page web application，经过一番查询了解，我觉得single page application才应该是它的全称)。SPA是一种 网络应用程序(WebApp)模型。在传统的网站中，不同的页面之间的切换都是直接从服务器加载一整个新的页面
2020-07-10 15:31:07
470
原创 微信小程序列表分页以及setData过载处理
微信小程序列表分页以及setData过载处理在项目中商品列表不会把所有数据一次性全部展示出来，一般会采取分页处理方式此处我是每次展示6条数据，下滑重新加载，上拉数据叠加效果图：代码：注意：我这里的pages 不是每次请求的页数，而是每次获取的下标，例如：第一次从下标0开始取，第二次从6开始取，这是后台写完后与我沟通过的，你们按照自身情况wxml:<block wx:for="{{shopList}}" wx:for-item="shopitem" wx:for-index="sho
2020-06-19 17:59:46
629
原创 Windows10+wget
今天安利了一款扒站神器===>>>wget安装步骤前往eternallybored下载最新版本的wget的zip/exe文件，如果你下载的是zip文件，请将其解压,并将wget.exe放入 C:\Windows\System32内（会提示管理员权限，给他就行），无论你下的是64还是32位版本。完事。看图：运行然后打开cmd:输入wget --help 去重启一下，接下来就会显示此工具的一些命令介绍，然后就可以使用了，看图：接下来就可以做你想做的了，首先你可以cd
2020-06-12 10:20:39
837
原创 第一次开发微信小程序遇到的问题
算是第一次开发微信小程序时的心得，有许多地方需要注意：1.路由跳转：wx.reLaunch(Object object)当使用wx.reLaunch进行跳转时，会走跳转后页面的onLoad方法，尤其是当子页面跳转tabber页面时，数据发生改变，但是tabber页面不会去刷新数据，这时候用就非常nice！2.页面跳转两次：一开始开发的时候小程序的内置方法不熟悉，导致onLoad与onShow方法运用混乱，导致在手机预览的时候点击跳转B页面时，B页面跳转两次，原因就在于onLoad与onSho
2020-06-10 16:10:51
343
原创 DPlayer.js视频播放插件
DPlayer.js视频播放插件简单的使用主要用到了实现了：视频播放 、监听开始、结束、暂停、播放时间、切换视频官方文档：http://dplayer.js.org效果图:**注意：我是在本地起了个服务，用局域网连接到手机测试，其中苹果手机中，视频的跳转视频位置失效，安卓手机良好，目前没解决…后续有时间会持续更新**代码部分 html： <link rel="styl...
2020-04-26 14:57:55
7424
原创 jq多个倒计时 天、时、分、秒
jq倒计时 天、时、分、秒$(function(){ let setTimer = null; let Time = $('.countdown').attr('time');//获取数据(秒数) 或者写死数据如：10 setTimer = setInterval(function () { Time--; timer(Time, setTimer); }, 1000);})...
2020-04-01 18:03:15
345
原创 input type=number时禁止鼠标滚动、上下箭头不能为负数
整理一份相对完整版的输入框 type=‘number’ 时为正整数的操作 <span class="minus">-</span> <input class="inpNum" type="number" value="1"> <span class="add">+</span> // 调...
2020-03-13 08:45:46
570
原创 简单的视频、音频播放、Uncaught TypeError: $(...).play is not a function
在H5中 视频音频是不能用直接加载完自动播放的解决方法：一、需要用按钮执行下操作：知识点：js控制媒体play()播放pause()暂停load()重新加载如下例代码： <audio id="aud" src="../images/25a6_b1be_6839_45fbf93c9a2711793f685617c824bdd7.mp3" controls autoplay &g...
2020-02-26 10:34:48
2931
原创 swiper制作抢购轮播、滑动或点击时获取对应的索引
swiper制作抢购轮播、滑动或点击时获取对应的索引先看效果图：介绍：这里只是做了个效果没有做交互，不过效果有了数据直接套就行了，样式表的话就不在这里展示了(你们都会的~)下面的js代码是当点击左右箭头时或者滑动轮播时获取对应的下标当直接点击轮播时获取对应的下标代码中的标注我感觉很明确了html代码： <div class="swiper-container">...
2020-02-13 17:05:08
1741
原创 layui进度条根据变量改变
layui进度条根据变量改变 <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo"> <div class="layui-progress-bar layui-progress-num"></div> </div&...
2020-02-13 09:44:39
1607
原创 vue项目运行报错：serve: `vue-cli-service serve`
vue项目运行报错：serve: vue-cli-service serve首先，你先去检查下你配置的 host:地址是多少 ，比如我的是localhost,如果用的是局域网IP 那就要更改成你目前的局域网IP 或 改成localhostmodule.exports = { devServer: { open: false, // 设置主机地址 ...
2020-01-29 13:01:56
94284
9
原创 js判断页面是否加载完成
js判断页面是否加载完成下面的图片自己可以转化成base64编码的形式，这里因字数太多我改掉了…//获取浏览器页面可见高度和宽度var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth;//计算loading框距离顶部和左部的距离（l...
2019-12-20 09:37:30
613
原创 mescroll.js下拉刷新
最近看了一个web的下滑控件：mescroll.js，感觉很给力，目前只看了下滑部分，在此纪录一下需要的同学可以直接搜索mescroll去官网查看即可老规矩 先看效果图：下面是代码部分： <link rel="stylesheet" href="css/mescroll.min.css"> <title>首页</title></head...
2019-11-16 16:38:20
510
原创 web可滑动滑块+对应的输入值滑动
可滑动滑块+对应的输入值滑动最近客户要求当滑动滑块时输入框显示对应的金额，当输入金额时滑块到对应的位置今天拿出来分享下先看下效果图：这是html部分：<ul class="moneyTabs"> <li class="moneyTabsAct"> <div class="moneyInpBox">...
2019-11-16 15:14:53
922
1
原创 web仿微信支付界面，自定义模拟键盘
web仿微信支付界面，自定义模拟键盘可谓是煞费苦心 还是自己技能不足，不过还是出来了第一板块是html界面 微信支付<link rel="stylesheet" type="text/css" href="css/animate.css"><link rel="stylesheet" type="text/css" href="...
2019-11-05 17:42:41
6447
6
原创 web移动端阻止默认滑动
web移动端防止滑动验证右滑回到上一页web移动端防止滑动验证右滑回到上一页有效方法其效果是防止在进行拖拽事件的时候阻止浏览器的默认事件，然后就OK了 window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; ...
2019-10-29 10:10:37
479
1
利用swiper制作抢购轮播.rar
2020-02-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人