# vue2升vue3笔记
# 初始化
通过cli创建vue3标准项目,拷贝老项目src进来替换。
手动安装package.json中单独的依赖项。
# Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.
vue3对404配置进行了修改,必须要使用正则匹配
{
// 匹配所有路径 vue2使用* vue3使用/:pathMatch(.*)*或/:pathMatch(.*)或/:catchAll(.*)
path: "/:pathMatch(.*)*",
name: "404",
component: ()=> import("../components/NoFind.vue")
}
原因:Vue Router不再使用path-to-regexp,而是实现了自己的解析系统,该系统允许路由排名并启用动态路由。由于我们通常会在每个项目中添加一条单独的包罗万象的路线,因此支持的特殊语法没有太大的好处*。参数的编码是跨路线编码,无一例外使事情更容易预测。
# vue-clipboard2
只支持vue2
换为
npm i vue-clipboard-plus
# render函数
第一个参数不是h了,是props,需要props的直接用,不用去context中取
# element
装element-plus
按需引入需在每个页面单独引入所需组件
# transition搭配router-view
之前
<transition name="fade-transform" mode="out-in">
<keep-alive>
<router-view :key="key" />
</keep-alive>
</transition>
需修改为
<router-view v-slot="{ Component }">
<transition name="fade-transform" mode="out-in">
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
# dev-tools
网上搜vue3的下载
提供个chrome插件网站
https://chrome.zzzmh.cn/