歪比巴卜

想给开源社区贡献点代码（遇到bug了）文档启动1234git clone yarnyarn bootstrapyarn website-dev 代码改动123git clone yarnyarn bootstrap /website/play下新建一个index.vue填写调试代码 1yarn website-dev:play 完毕

背景我们做的大量都是后台管理系统，对于这种系统，我们会发现，里面的业务其实相当单一 大量都是类似这种， 搜索条件，表格，分页 每个页面都要处理上下翻页，搜索，mounted加载首页table数据等等逻辑 虽然不复杂，但很累。 因此，我们需要封装一些DSL来降低我们的重复工作量 啥是CompositionAPI/hook看看文档 我们的请求经过封装，大概是这种格式1234567891011121314151617181920212223242526// /api/index.jsimport API from '@szyx/axios';// 请求拦截器API.interceptors.request.use((config) => { // xxxx return config;});// 结果拦截器API.interceptors.response.use( (response) => { // 判断状态 if (response.status === '0') &#...

背景element-plus中，el-select中可选项达到了500条，页面跳转销毁时导致异常卡顿（vue3.0.0版本，3.0.11版本有很大改善，建议升级） 因此需要进行分页操作。初步设想时当select中的options滚动到最底部的时候，触发加载更多，获取更多的可选项。 实现方式打算通过指令实现，这样添加就很方便，预期一个指令 1v-loadmore="loadMore" 搜一下正常情况下，我们碰到的100个需求，99个都已经有人实现过了，所以我们就只需要搜一哈，就能找到答案。 果不其然，答案异常的多，只不过都是element-ui的，不过改动不多，应该问题不大，让我们来试一试。 开始踩坑1.附上随处可搜的代码我就不贴从哪抄的了，因为随处可以搜到 12345678910111213Vue.directive('loadMore', { bind(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.queryS...

记录一些我碰到的入门问题 1.如何创建ts项目1npx create-react-app app-name --template typescript 2.react+ts项目eslint如何引入123yarn add eslint --devnpx eslint --init 选项如下： 12345678910111213141516171819202122232425262728293031323334353637? How would you like to use ESLint? … To check syntax only To check syntax and find problems❯ To check syntax, find problems, and enforce code style? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these? Which...

部署也是根据不同的路由模式进行不同情况部署 假设主应用和子应用使用相同模式的路由 不是说使用不同路由不行，而是没那个必要去增加复杂性 我们以本机模拟服务器部署情况 如上图，我打包好了两份代码，分别位于deploy和deployhash文件夹 deploy文件夹内放置的是history模式的产物 deployhash文件夹内放置的是hash模式的产物 两个文件夹内的文件结构是一模一样的，这个图我们叫它图1，等哈记得回头来看 —我是分割线—- 如果选择history模式，子应用需要修改publicPath和routerBasePath，这个不要忘记了 1234// vue.config.js{ publicPath: process.env.NODE_ENV === 'production' ? `/subapps/${packageName}` : '/',} 123456// router.jsconst setupRouter = () => createRouter({ ...

一、背景开发环境可以利用控制台调试，看网络请求啊乱七八糟的。但是打包以后就没办法看了。 二、解决这个问题其实主要打开控制台的关键语句就是 1window.webContents.openDevTools() 那我们需要设置一个不常用的快捷键，避免误触来打开控制台 12345678910111213141516171819import {globalShortcut} from 'electron';// 快捷键注册function registryShortcut() { globalShortcut.register('CommandOrControl+J+K', () => { // 获取当前窗口 BrowserWindow.getFocusedWindow().webContents.openDevTools(); });}app.whenReady().then(() => { // 注册快捷键 if (!isDevelopmen...

背景在开发过程中，偶尔会遇到一些问题，需要通过修改三方库才能解决。 一般遇到这种情况，我们会采取以下方式解决： 1.fork一份并修改，package.json指向fork的地址。2.写一个shell脚本，在拉完包后执行脚本替换。第一个方法太重了，并且在主库的更新合并上比较麻烦，需要手动去合并。 第二个方法需要写shell脚本，投入产出比不高，还经常忘记执行。 但自从发现了如下方法，临时修改npm包再也不是事了 使用patch-package和postinstall-postinstall1.集成1yarn add patch-package postinstall-postinstall -D 2.下载包1yarn 3.修改文件找到node_modules中需要修改的文件，直接修改它 4.创建布丁修改完文件以后，执行如下命令，package-name是修改的包名 1npx patch-package package-name 执行完毕以后，会在项目根目录下生成一个patches目录，目录中生成文件：package-name+version.patch 该文件描述了修改内容...

Vue3的router问题其实严格来说，这不是qiankun的问题，是vue-router4.x的问题。 解决方案：history模式使用window.history跳转，hash模式主应用添加hashchange事件发送 详情见issues1280 旧的jq项目改造，发现属性和方法丢失子应用包含多个script，其中有些是公共方法，其他js使用的时候提示找不到方法 解决方案：需要显式挂载到window 详情见issues1272 qiankun添加的div撑不满外部盒子使用css选择器为qiankun添加的div加样式 123456#sub-apps { height: 100%; >div:first-child { height: 100%; }} hash模式下无法激活子应用添加方法getActiveRule 1const getActiveRule = (hash) => (location) => location.hash.startsWith(hash); 子应用的接口devServer代理...

这个方式其实是我在上家公司的时候体验过，觉得确实很有意思。 所以这里来逆推一下实现方式。 解决了什么痛点1.开发一个模块，需要启动2-3个项目在微前端的开发过程中，如果我们要在主应用中看效果，我们至少需要启动一个主应用，和一个待开发模块，如果项目具有登陆机制，我们还需要启动一个登陆模块。 换句话说，为了开发一个模块，我们需要至少启动三个项目。 2.数据耦合的情况下，无法单独启动项目调试3.特定环境下出现的bug可能某些bug依赖特定的数据，在测试环境出现了但在本地运行或开发环境运行正常。 如何解决在成功发布一个版本以后，配置需要在特定条件下触发加载的本地模块，从而将线上服务的某些模块，代理到本地启动的模块，进行开发调试。 如何实现前面几篇讲到，注册的配置信息其实是可以从远端拉取的，那么只需要有一个配置的地方，我们就可以动态修改这个配置列表。 换句话说，我们可以通过一些代码，配合需要配置列表，进行代理。 1.预设特定条件比如我们预设一个特定条件： 环境为development或beta环境 且 成功读取远程配置列表 且 浏览器localStorage中存在名为developer的值...

微前端改造这里以Vue3为例子，主应用和子应用均使用vue3 路由的话，建议主应用和子应用使用相同模式，即均为history或者均为hash 以下先使用为history模式讲解，最后会写如何使用hash模式。 History模式主应用改造一般情况下，我们会将带导航的layout的部分，直接放在主应用中。当然不是说不能拆，是能拆的，因为导航的layout明显是个路由不敏感部分，完全可以拆解为单独的子应用。 1.添加qiankun1yarn add qiankun 2.vue.config.js其实没什么要改的，但我这还是建议把这两个加上 123456module.exports = { publicPath: '/main/', // 修改打包名 outputDir: 'main',}; 3.router.js123456const router = createRouter({ // 这里就是publicPath了 history: createWebHistory(process.env.BA...