- 博客(19)
- 收藏
- 关注
RSS订阅
原创 微前端qiankun的部署
如果服务器数量有限，或不能跨域等原因需要把主应用和微应用部署到一起。通常的做法是主应用部署在一级目录，微应用部署在二级目录child下。src/micro/app.js文件中查看子应用的端口号。例如此端口号为31325。
2025-01-22 18:49:13
486
原创 微前端qiankun进阶使用：应用间通信
micro/childEmit.js中/*** des：主应用传递给子应用的 用于emit触发主应用事件的函数*/store.dispatch('pagers/changeMsg', val)//修改存放在vuex中的值micro/app.js中/*** des：配置需要下发的子应用及其相关信息*//*** 主应用公共资源下发子应用*/// 导入主应用ui库// 导入主应用工具类库// 导入主应用需要下发的emit函数。
2025-01-22 18:29:19
958
原创 微前端qiankun的基本使用（vue-element-admin作为项目模版）
目录文件：src/layout/components/AppMain.vue。启动文件：src/micro/index.js。layout组件中挂载子应用。
2025-01-22 18:02:58
399
原创 qiankun微前端问题：通过主应用加载子应用，开发环境跨域代理proxy无效的解决办法
但是通过主应用去加载的子应用，子应用发出的请求实际已经被主应用劫持了，子应用配置的请求代理，在独立运行是没问题的。所以主应用也需要配置子应用需要的请求代理。自然不会运行到子应用的请求代理。
2025-01-22 18:53:08
233
1
原创 【前端优化】compression-webpack-plugin资源压缩
前端优化之文本资源压缩基于文本的资源应进行压缩，以尽量减少网络总字节数当浏览器请求资源时，它将使用Accept-Encoding HTTP 请求标头来指示它支持哪些压缩算法。Accept-Encoding: gzip, compress, br兼容性：Brotli (br)：不兼容Internet Explorer、Safari 桌面版和 iOS 上的 SafariGZIP：所有主流浏览器都支持 GZIP，但效率不如 Brotli服务器应返回 Content-Encoding HTT
2022-05-24 20:31:31
3571
原创 vue-lottie实现前端动画
Lottie简介官方文档：https://lottiefiles.com/Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。交互性非常好，动画支持倍速播放，倒放，暂停等功能，能熟练使用的话，交互性能提升很多。其优点：动画由设计使用专业的动画制作工具Adobe Aft
2022-04-19 14:21:54
1108
原创 mac安装nvm(M1)
1.什么是nvm？nvm 是 Mac 下的 node 管理工具,可以在同一台电脑上安装多个Node.js版本灵活切换。2.安装前的准备卸载已安装到全局的 node/npm如果之前是在官网下载的 node 安装包，运行后会自动安装在全局目录，其中 node 命令在 /usr/local/bin/node，npm 命令在全局 node_modules 目录中，具体路径为 /usr/local/lib/node_modules/npm安装 nvm 之前最好先删除下已安装的 node 和全局 no
2022-04-19 14:19:13
7388
4
原创 JS解析Excel文件
JS解析Excel文件工作中会遇到这种情形：上传Excel文件，解析其中的内容，渲染到表格中下面介绍方法，亲测有效！安装依赖npm install -S file-savernpm install -S xlsxnpm install -D script-loaderman.js中引入import { FileSaver} from 'file-saver';import XLSX from 'xlsx';事例（以vue中el-upload组件为例）<template&
2020-07-14 15:46:09
1201
原创 elementui的el-input按回车键后执行方法
elementui的el-input按回车键后执行方法el-input增加 @keyup.enter.native若增加后还会执行刷新则需要在el-form中增加 @submit.native.prevent<el-form :model="findPwdForm" ref="PwdForm" @submit.native.prevent> <el...
2019-05-30 10:35:43
15578
1
原创 vue中使用crypto-js加密密码等信息
crypto-js加密AES最近项目中需要在登陆请求时将密码加密，要求使用aes方式加密，于是用到了crypto-js完美解决，亲测有效要注意前端和后端的加密配置要保持一致1.安装crypto-js npm install crypto-js --save2.编写encrypt.js在Api文件夹中新建encrypt.js文件（此为较简洁方法，未处理数据，未用到密钥偏移量） ...
2019-05-29 17:39:47
4611
2
原创 vue中异步加载百度地图及相关资源
vue中异步加载百度地图及相关资源官网加载百度地图基础API都是index.html直接加script，包括点聚合API也是这种方式。但实际应用中，有时候只有一个页面需要到百度地图，没必要全局都加载百度地图的文件，会增加负担.因此介绍vue中如何异步加载百度地图及其相关资源（比如百度地图的点聚合API也需要加载进来js文件）我们来对比一下：一般加载： <!-- index.ht...
2019-04-03 17:27:38
2303
原创 webpack打包过滤console等
webpack打包过滤console等开发环境下需要console打印很多的数据，但是放在放在线上想过滤掉console，debugger这些，只要在webpack的配置里面加上一段代码就可以过滤掉。对于webpack4以上的版本过滤console方法：1.安装terser-webpack-plugin插件 npm i --save terser-webpack-plugin2....
2019-04-03 16:37:09
2088
1
原创 百度地图中自定义点聚合实现
百度地图中自定义点聚合实现点聚合 （MarkerClusterer 标记聚合器）用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能。点聚合的实现原理是按照以某点为中心的正方形作为区域，把此区域的点聚合在一个点上，并随着地图比例尺改变此点区域大小，同时改变聚合点的数量。默认百度地图的聚合marker效果如下：官方聚合示例：http://lbsyun.baidu.com/jsdemo...
2019-04-02 14:13:51
11964
3
原创 微信小程序中内嵌页面的后退操作
微信小程序中内嵌页面的后退操作使用原生的微信顶部栏的后退按钮实现要注意几点：1.一级页面嵌入网页的话，没有后退按钮，点进去后再次点击网页内的链接，无法后退2.>=二级页面才会有后退按钮，在>=二级页面中嵌入网页，点进去后再次点击网页内的链接，后退按钮会按照顺序依次返回，直到返回一级页面。如果我们想要在一级页面中显示内嵌的网页并也想实现网页内再次点击还能依次后退该怎么办呢？这...
2019-03-20 17:09:43
2851
原创 微信小程序内嵌网页链接
微信小程序内嵌网页链接微信小程序和浏览器的环境不同，微信小程序中的所有外部连接都必须部署业务域名成功后才能实现跳转访问不管是a标签的超链接，还是iframe等等都需要在微信公众平台部署业务域名才可访问若是内嵌微信公众号文章的话则不需要部署，但需要关联微信公众号需要提前注意几点：1.个人和海外类型的小程序暂不支持使用！2.使用微信官方组件web-view，此组件会覆盖页面中所有其他组件，...
2019-03-20 16:51:27
8965
原创 微信小程序mpvue中封装axios(js或ts适用)
微信小程序mpvue中封装axios(js或ts适用)mpvue完整模板项目可见github链接：mpvue2-typescript-axios1.安装axios$ npm install axios2.封装axios：此为大致示例，可根据具体情况增加配置敲黑板！划重点！由于微信小程序需要用微信官方请求接口 wx.request，因此需要用adapter自定义还有一些上传下载等操...
2019-03-19 16:12:45
3872
原创 微信小程序框架模板部署：mpvue2.x+typescript+webpack3.x
微信小程序mpvue-部署资源开发准备1.在微信公众平台注册申请AppID2.安装开发者工具：在微信公众平台安装开发者工具，用于小程序调试部署框架： mpvuempvue 继承自 Vue.js，其技术规范和语法特点与 Vue.js 保持一致。1.vue-cli创建mpvue # 全局安装 vue-cli $ npm install --global vue-cli # 创建...
2019-03-07 19:04:59
2342
原创 Typescript改写Javascript
TypeScrpt相比JavaScript的主要特点多了属性声明类型，格式：属性名：声明类型name:string=""; //此时name属性声明类型为string使用class类来引入或暴露内容TypeScript中将所有属性和方法封装成类，用类的形式引入或暴露其内容，在vue中具体示例可见下文“基本格式”。基本格式组件<script>中要加lang="ts...
2019-02-27 16:50:13
705
原创 微信小程序mpvue-部署资源
微信小程序-部署资源技术框架：mpvue2.x+typescript+webpack3.x目录开发准备框架工具模板组件开发准备1.在微信公众平台注册申请AppID2.安装开发者工具：在微信公众平台安装开发者工具，用于小程序调试框架部署框架： mpvuempvue 继承自 Vue.js，其技术规范和语法特点与 Vue.js 保持一致。1.vue-cli创建mpvue...
2019-02-26 18:22:29
987
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人