eslint校验的一些问题（暂时无解）在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南：2.7日志官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这个目前找不到办法解决，只能等后续更新修复了（配合ts的时候出现了）。还有就是如果配合了ts使用，ts的类型声明在export导出的时候，vscode中已经不报错了，但是终端上还是会提示没有这个变量导出，明明已经导出了，而且文件也保存了，解决办法就只能重新启动一下server服务，让项目重新运行一下。useRoute和useRouter这个问题我相信很多人都会遇到，虽然我们的vue升级后支持setup的写法，但是路由还是"vue-router": "^3.6.4" 3x的版本，这个版本并没有像4版本那样，可以直接从vue-router插件中导出useRoute和useRouter方法。但是在setup中是没有this对象的，甚至也没有像之前的@vue/composition-api那样，在setup的第二个参数中有root属性，我们获取路由实例可以从root中获取。虽然我们可以在路由中这么写：import Vue from "vue"; import VueRouter from "vue-router"; import routes from "./routes"; Vue.use(VueRouter); const router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes, }); /** 模拟router hooks */ export function useRouter() { return router; } export default router;但是我们并不能很好的获取当前路由对象，甚至对当前路由的属性进行监听变化。找了好久，在官方的一个issues中找到了一个很不错的办法：issues他的意思是我们可以通过这种方式引入useRoute、useRouterimport { useRoute, useRouter } from "vue-router/dist/composables"需要注意的是这种方式只能在setup中使用，如果你想在一个js或者ts文件中获取路由，你可能还得使用上面模拟router hooks的方式。pinia和vuex的选择直接放弃pinia，官方虽然在文档中有vue2使用的方法，但是完全不行，照着文档写连项目都无法启动，造势倒是挺大的，这点确实很遗憾的，本来是想无损过渡vue3的写法，显然没有这个机会了。vuex在使用ts后，类型的推断可以参考之前的文章，用法完全一样。但是那个useStore官方也没有提供，我们也得自己手动模拟一个。import Vue from "vue"; import Vuex from "vuex"; import type { Store } from "vuex"; Vue.use(Vuex); export type RootState = { }; const store: Store<RootState> = new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: { } }); export default store; /** 模拟useStore */ export function useStore(): Store<RootState> { return store; }vue的this上的属性声明在src上声明一个.d.ts文件，内容如下：import type { Store } from "vuex"; import type { RootState } from "./store"; import VueRouter from "vue-router"; declare module "vue" { interface ComponentCustomProperties { $store: Store<RootState>; $router: VueRouter; } }有啥属性在this上有的，可以自己在这补上，但是需要注意，虽然补了但是有的推断有些问题，不会有对应的代码提示，有点蛋疼，应该是官方ts的声明不是太好，由于我全部用的setup语法，所以这个其实也用不到。利用插件实现一个传送门Teleport插件地址：portal-vue贴一下我的用法：创建一个插件ts文件：_PortalVue.ts_import Vue from "vue"; import PortalVue from "portal-vue"; Vue.use(PortalVue, { portalName: "Teleport", //传送门 portalTargetName: "TeleportTarget", //传送门目标 }); 然后再main.ts中激活使用import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; //插件 import "./plugins/PortalVue"; Vue.config.productionTip = false; new Vue({ router, store, render: (h) => h(App), });