木灵鱼儿
阅读:1278
使用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),
});
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
vue-router4 新增功能
动态路由这个其实在3版也有,不过3版原来使用的api是addRoutes,这个api顾名思义,就是可以传入一个路由数组来进行注册,后来被废弃,现在3版和4版统一采用addRouteapi。addRoute一次只能添加一个路由,但是有两种用法:添加一条新路由router.addRoute({ path: "/about", name: "About", component: () => import("../views/About.vue"), })给已存在的路由注册一个子路由,父路由必须有name属性route...
vue-router4 一些常见配置的改动
创建路由实例方式改变3版本的时候是通过new的方式创建路由实例,4版本是改用了createRouter的方式:import { createRouter } from 'vue-router' const router = createRouter({ // ... })路由模式配置改变3版本路由模式是由mode属性控制,值为字符串,现在通过import引入不同函数来创建不同的路由模式:"history"改为createWebHistory()"hash"改为createWebHashHistory()"abstract"...
vue3 Teleport 传送门
官方文档:Teleport该组件可以将插槽接收的内容渲染到指定的dom位置,常见的一个业务需求就是model弹窗了,我们有时候会在子组件里面去书写一个弹窗,但是这个弹窗是全局性的,为了防止被定位元素影响,我们vue2时会在mounted生命钩子里手动将model的dom传入body里面,而且还得在销毁时从body移除。vue3提供了teleport组件,它和react的传送门组件其实效果相同,它有两个props属性:toto支持字符串和html元素,如果是字符串,指的是css选择器,而html元素则是dom。disabled接收一个布尔值,表示是否禁用传送门,通过这个属性我们可以很方便的...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...