qq_39750019的博客

qiankun 模式下，主应用严格模式，子应用el-popover 点击无效不显示，但是开启开发者模式，查看body有相关DOM信息，el-popover display:none,无top 和left值。在子应用 main.js中补充Popover的全局配置。在子应用的element-variables.css。2，样式隔离：即使DOM挂在正确，样式也可能被隔离。3，时间阻断：主应用可能拦截了子应用的弹出事件。重启项目，在qiankun环境下可正常展示。1，强制Popover 挂载到子应用容器。

el-menu页面离开弹窗，当前激活菜单的高亮问题

报错问题解决排查问题，tsc文件无法运行js文件发现一个组件<script lang="ts">再次运行项目就好了

问题描述：项目中使用hooks，某个hook里使用到onBeforeUnmount函数，就在页面引入然后解决方法，最开始以为是vue版本，更新后还是不行然后尝试npm i解决方式npm i typescript@4.3.5

问题描述：项目运行，查看我本地的node版本是12.14.0解决yarn config set ignore-engines true

问题：npm run serve时，tsconfig.json文件中无法写入"XXX.js",因为他会覆盖其他文件解决在tsconfig.json文件，注释掉 “allowJs”:true

问题：tsconfig.json中报错，找不到webpack-env的类型定义文件解决：npm i @types/webpack-env @types/node -Dyarn可能会安装失败，建议使用npm

步骤1，创建即时通信 IM 应用1）登录 即时通信 IM 控制台，单击 创建新应用 将弹出对话框。2），输入您的应用名称，单击 确认 即可完成创建3），可在 即时通信 IM 控制台 总览页面查看新建应用的状态、业务版本、SDKAppID、创建时间以及到期时间。请记录 SDKAppID 信息步骤2，创建 AVChatRoom您可以通过控制台创建群组，也可以通过调用 创建群组 API 创建群组。本文以通过控制台创建为例。1）登录 即时通信 IM 控制台，单击目标应用卡片。2）在左侧导航栏选择群

1.文件—首选项—设置 搜索自动更新

1，安装 eslint， Prettier ESLint2，首选项–设置–setting.json{ "editor.quickSuggestions": { //开启自动显示建议 "other": true, "comments": true, "strings": true }, // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize

问题：下载zip文件流当遇到下载数据不存在，需要将请求的错误信息提示出来，展示给用户但是responseType: “blob”。所以需要转为json格式

问题描述npm i vue-template-compiler@2.6.14

问题描述：npm install vant@2.12.30

问题描述：npm installnpm run dev报错误Error: ENOENT: no such file or directory, scandir ‘D:…\signpay-admin-new\node_modules\node-sass\vendor’解决重新下载node-sass包npm rebuild node-sass

问题描述：页面引入百度API报警示问题 A Parser-blocking, cross site (i.e. different eTLD+1) script,把api引用url里面的 api 改为 getscriptapi 改为 getscript以后

问题描述：项目运行报警高：1、npm install default-passive-events2、在main.ts 中引入：import ‘default-passive-events’3、npm run dev

问题描述pm run dev 显示下面提示Network: use --host to expose查看文档修改vite.config.js配置就OK了

问题描述：npm install 报错 JSON.parse Unexpected token in JSON at position 60 while pa运行项目报错，尝试npm install还是报错，无法解决1.rm -f package-lock.json 无法解决2，npm cache clean --force3，我设置了代理尝试npm config rm proxynpm config rm https-proxy还是无法解决开始考虑是不是npm 问题换yarn、cnpm

问题描述：http://localhost:3000/fail?msg=123地址后带参数获取地址后的参数报错"Cannot find name '$route'."查看router文档import {useRoute} from 'vue-router' export default defineComponent({ name:"fail", setup() { const route = useRoute() onMounted(() => {

之前版本的写法/deep/ .van-cell{ padding: 10px 16px;}现在新版本的写法 &:deep(van-cell) { padding: 10px 16px; }

问题描述:找不到名称“dotenv”安装npm i dotenv -D

问题描述：“模块 “”…/…/node_modules/vue-router/types”" 没有导出的成员 “RouteRecordRaw”。你是想改用 "import RouteRecor检查配置后发现，依赖中确实安装了vue-router 3.x 的版本然后卸载vue-router npm uninstall vue-router安装 vue-router 4.x的版本npm install vue-router@next -S然后运行npm run dev检查修改跑起来了

问题描述import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css'1，第一反应以为是路径不对改为 import ‘…/node_modules/element-plus/lib/theme-chalk/index.css’还是报错2，重新安装 npm i element-plus 还是报错解决方法查看官网，发现element-plus官网导入css样式库修改为下面这种形式了

1，用vite搭建项目环境2，element-plus使用安装：npm install element-plus --savemain.js 导入库，CSS库

1,首先npm install2，不行的话，就删除了node_modules和package-lock后重新install3，还是不行的话，看看项目文件夹是不是中文的，改成英文后就可以正常启动项目4，也还是不行的话，npm install -g cross-env...

1，删除项目的node_modules文件夹2，npm install如果还不运行再安装webpack-dev-server

1.问题描述Uncaught SyntaxError: Cannot use import statement outside a moduleHTML：js :直接在浏览器中打开该html文件，发现报错了：Uncaught SyntaxError: Cannot use import statement outside a module报错的原因是用了es6的语法， 浏览器默认将它作为js解析会出现问题，需要将它作为模块导入，script标签默认type=“text/javascript”

最近开发，发现vue移动端项目input在ios上点击失效，需要多次点击才可以获取焦点排查发现导致这个问题是因为项目中引入了FastClick， 这个是解决移动端延迟300毫秒的优化当使用FastClick 时，输入框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透在全局main.js FastClick.prototype.focus = function(targetElement) { var len.

1.安装npm i vant@next -Snpm i vite-plugin-imp -D2.npm install postcss-pxtorem -D在根目录下创建postcss.config.js在这里插入代码片module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selector

ts支持复杂组件逻辑进行分离 --state 计算属性相关的逻辑抽离出来放到一个单独的文件里组件间逻辑共享 例如搜索逻辑 分页逻辑，排序的逻辑 很多组件的这些逻辑都可以共享共用的

1.computed2.toRefs

1.可以使用直接导入的 onX 函数注册生命周期钩子import { onMounted, onUpdated, onUnmounted } from 'vue'const MyComponent = { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmounte

1.子组件2.父组件

问题描述：解决：tsconfig.json里的"strict": true改为"strict": false

1.html2.红色边框里的内容就可以提取出来还可以 computed

1.HTML2.Vue2写法Vue3

问题描述：Missing return type on function在禁用规则加上"@typescript-eslint/explicit-module-boundary-types": “off”

1.查看node,npm vue版本2.创建项目vue create Progectdemo1

Vue2对于复杂逻辑组件，在后期变得无法维护Vue2中代码复用方法，如Mixin,Filters都有缺陷Mixin ----（命名空间冲突，逻辑不清晰，不易复用）scoped slot 作用域插槽 （配置项多，代码分裂，性能差）.Vue2对TS支持不充分复杂逻辑进行分离组件逻辑共享Options API逻辑被拆分成componentspropsdatacomputedmethods生命周期的方法总结Vue3 组合式API + 函数编程组件间共享逻辑...

核心代码 +Composiiton Api 13.5kb 最小11.75kb所有Runtime 22.5kb(vue2 32kb)为什么会很有这么大的性能提升呢？Compiler原理优化1静态Node不再做更新处理(hoistStatic —>SSR优化）静态绑定的Class id不在做更新处理更具打包标记PathFlag,进行更新分析（动态绑定）优化21.事件监听器Cathe缓存处理（cacheHandlers）2.hoistStatic自动针对多静态节点进行优化，输出字.