木灵鱼儿

木灵鱼儿

阅读：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插件中导出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、useRouter

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),
});
文章分类 vue 项目实战
文章标签 vuevuexvue-routereslintTeleport传送门2.7useRouteuseRouterpinia
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 114

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译
让typecho支持特殊字符让typecho支持特殊字符