在 vue3 中写 tsx，编辑器识别为 React 模式报错怎么破？

By default in code on

两年没更新了，诈个尸，最近终于有时间来卷了 最近在重构公司表单系统，底层物料组件逻辑比较复杂需要 jsx 的能力，vue 这边是支持的，并且代码写完编译运行没有任何问题，但是编辑器里跳出来一个幺蛾子： 恩？你怎么用明朝的剑斩清朝的官？ 第一个报错只在 webstorm 中有，vscode 里是没问题的，这个好解决，因为本身 React17 以后 jsx 对 react 导入的依赖已经不存在了，所以这其实是 WebStorm 的锅，配置上关关掉就行，基本上以后就算是 react 代码也不会再用到这个检查了： 第 2.3 个问题比较复杂，看报错，很显然，IDE 的 ts 检查器把 tsx 的代码默认以 react 的方式去执行了，我先上解决方案，不想深究的就没必要往下面看排坑历程了： ts…

封装小程序 wx.request 添加token

By default in 小程序 on

先说一下为什么不使用fly.io，目前 fly.io 更大的方向还是为了多环境同步时做准备，一套代码适应 h5、native、weex 和小程序，这样看上去貌似确实使用它会方便很多，介于现在小程序和 mpvue 挖下的坑，想要在小程序上完美模拟浏览器时的 vue 并不好做，而且 fly.io 的小程序版本中的思路基本也是类似工厂模式，依靠 promise 来封装 wx.requeset，提供统一对外的拦截器，那么问题来了，我经手的项目中大量使用 token 来认证，而存储 token 的时候小程序和网页的接口是全然不同的，需要额外复杂的代码来同时适配多端的存储接口，对于我这个项目只有 3 周的开发周期而言肯定是不划算的... 那么先直接放封装部分的代码 // // The Code By DayiTech FrontEnd // Author:Han // Created At 2018/…

前后端分离鉴权：token和axios请求响应拦截器

By default in code on

首先来看一下设计思路 后端使用的是laravel5.5，搭配jwt-auth来做 CORS 跨域，每个请求前端都需要在请求头里带token，并且存储到本地localStorage，token在服务端默认八小时过期，到还剩 2 小时的时候后端会在这段时间内的请求响应头里返回新的token，前端拿到新的token更新本地token整体流程看起来不复杂，并且项目里本身就在使用axios 设置拦截器起来还是轻松的 // main.js import Vue from 'vue' import App from './App' import router from './router' import store from './store' import axios from 'axios' Vue.prototype.$axios…

prerender-spa-plugin:Vue-seo爬坑

By default in code on

这段时间在做一个新 SaaS，单点登录架构，然后这个项目有一个面向大众的首页，于是在项目已经写了一个星期的时候我突然意识到，SEO 可能是个问题 我们的后台是 php 写的，介于这到底是个 SaaS 项目，只有几个页面需要给爬虫爬，不会也不需要考虑全局去开启 ssr，于是看到了这个东西prerender-spa-plugin，他可以在你打包项目的时候帮你预渲染出来，从而做到 seo 的效果 * 高高兴兴安装，悲悲伤伤百度 // 安装 npm install --save-dev prerender-spa-plugin // 使用vue-router请把路由改成history模式 // vue-cli构建的项目请前往build/webpack.prod.conf.js 否则webpack.config.js // 引入预渲染 const PrerenderSpaPlugin = require('prerender-spa-plugin') // 在plugins中使用 new PrerenderSPAPlugin({ staticDir: path.join(…

[VUE]Babel-plugin-import使用示例：vant按需引入

By default in code on

近两年前端框架火得一塌糊涂，各种第三方开发组件库层出不穷，饿了么的 ElementUI、炫酷的 iView、Bootstrap 家的 VueStrap、有赞家的 Vant 和 Zant。这些框架提供了很优秀的组件和一些设计规范，例如弹框、列表显示器、图片预览浮层、表格等等，而我们在做 SPA 的时候只使用 Vant 的一部分功能，完整引入的话会导致首屏加载时间长，一些不需要使用的东西也在走流量了。Babel-plugin-import 则是从 React 那边过来的一个解决方案，能够按需使用 Vant。 * 安装 npm i babel-plugin-import -D * 使用 在你的项目根目录里有一个.babelrc的文件，打开以后是这样的 { "presets": [ ["env", { "modules": false,…

微信浏览器安卓键盘收回后表单不失焦的处理

By default in code on

今天发现一个有点难受的 BUG，理论应该是安卓的设计缺陷 这是一个文本域 在安卓上输入完成以后 点击键盘右上角的收回按钮 键盘消失 本来应该是键盘消失表单自动失焦 这个自动失焦在苹果上能够完成 但是安卓上那个输入的光标就一直留在了文本域 这样就导致了一个问题 键盘收回后我点击页面任何一个位置 都会再次把键盘唤醒弹出 屡试不爽 一开始我认为是下面高德地图和微信浏览器不兼容 于是在地图上做了禁用事件处理 但是无果 随后发现这与 input 解决方法 首先想到一件事 键盘唤醒的时候页面的高度就改变了 所以监听下页面 首先记录原页面高度 键盘回收的时候页面高度应该等于原页面高度 这个时候去对文本框进行 blur 操作 var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function() { var thisHeight = $(this).height(); if (winHeight - thisHeight > 50) { $('body').css(…