木灵鱼儿

木灵鱼儿

阅读:114

最后更新:2022/09/16/ 20:03:57

使用vue2.7的一些踩坑事项

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插件中导出useRouteuseRouter方法。

但是在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

他的意思是我们可以通过这种方式引入useRouteuseRouter

import { 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),
});

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 114

相关文章