郑州seo培训,长沙有实力的关键词优化价格,外贸网站建设视频教程,移动端网站开发的书上一个新公司接手了一个vue-cli3vue2vue-router3.0elementUI2.15avue2.6的后台管理项目#xff0c;因为vue2在2023年底已经不更新维护了#xff0c;elementUI也只支持到vue2#xff0c;然后总结了一下vue3的优势#xff0c;最后批准升级成为了vitevue3vue-router4.5element…上一个新公司接手了一个vue-cli3vue2vue-router3.0elementUI2.15avue2.6的后台管理项目因为vue2在2023年底已经不更新维护了elementUI也只支持到vue2然后总结了一下vue3的优势最后批准升级成为了vitevue3vue-router4.5elementPlus2.9avue3.6并向下兼容vu2。
那么现在开始升级
第一步
先搭建一个vite项目。
在这里说一下前期调研的时候是有两种方案的一种是先把vue-cli3升级到vue-cli4支持vue3然后再把webpack换成vite。第二种是直接迁移到vitevue3项目上然后根据报错修改。最后决定用第二种因为快简单粗暴
搭建vitevue3项目就不多说了官网都有介绍直接执行下面代码就行。
npm init vitelatest
执行好以后安装路由vue-router
cnpm install vue-router --save
第二步
创建router文件夹在下面建一个router.ts和index.ts routes.tsimport { RouteRecordRaw } from vue-router;//对外暴露配置路由
export const routes: ArrayRouteRecordRaw [{path: /,name: home,component: () import(/pages/home.vue), // 注意这里要带上 文件后缀.vuemeta: {}},//要注意vue3 404页面写法这是Path不能直接用*{path: /:catchAll(.*)*, // 匹配所有路径 vue2使用* vue3使用/: pathMatch(.*)* 或 /: pathMatch(.*) 或 /: catchAll(.*)redirect: /404,},
]
index.ts://通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from vue-router
import { routes } from ./routes
//创建路由器
const router createRouter({//路由模式根据需求选择history: createWebHashHistory(),routes: routes,
})
export default router
你如果是直接把vue2项目的路由文件直接复制过来的需要注意2点
1、每个文件后面之前省略的.vue必须要加上。
2、404页面的path不能是通配符*要修改为/:pathMatch(.*)或是/:catchAll(.*)
第三步
安装sass、axios、vuex如果你之前是用的vuex就直接安装vuex如果之前没有建议用pinia、element-plus和element-plus/icons-vue、avue如果用到了avue就安装没有的话不用安等你当前项目中依赖的一些包。
怎么安装就不多说了不过element-plus element-plus/icons-vue是必须要安装的因为之前的elementui不支持vue3。安装完以后介绍一个转换神器gogocode。
可以把你原来的vue2项目的代码转成兼容vue3的把elementUI转成兼容elementPlus的。
直接上官方连接根据官方介绍直接转换就行先执行vue2转vue3再执行elementUI转elementPlus。
Vue2 到 Vue3 升级插件
Element to Element Plus 升级插件
第四步
设置兼容vue2。根据vue官网的介绍下载vue/compat包如果存在 vue-template-compiler 的话将其替换为 vue/compiler-sfc。
npm i vue/compat -S
然后在vite.config.ts里面修改
// vite.config.js
export default {resolve: {alias: {vue: vue/compat}},plugins: [vue({template: {compilerOptions: {compatConfig: {MODE: 2}}}})]
}
官网就介绍到上面可我这配置好以后就是不兼容vue2最后发现在main.ts里面也要配置。
在main.ts里面添加以下代码
// 启用 Vue 2 兼容模式
import { configureCompat } from vue/compat;
configureCompat({ MODE: Vue2});
这样再npm run dev试试应该就可以启动起来了。
下面就是每个页面点一下看看报错了根据报错修改了。
以下是可能存在的问题
1、页面中引入的vue组件后面没有加.vue的要加上.vue要不报错。
2、elementUI升级elementPlus后样式可能会有出入要统一在全局样式修改。
3、所有页面引入ICON图标的因为element-plub/icon图标名称有一些和elementUI的图标名称有出入所以要根据官方提供的修改。icon名称参考https://element-plus.org/zh-CN/component/icon.html
4、如果你用到了avue-crud里面的字典项那么要确认一下dicUrl和dicHeaders是否还正确我这里dicUrl不对所以请求不到导致页面加载很慢排查半天才发现。
5、全局搜索yyyy-MM-dd替换为YYYY-MM-DD
6、页面中所有require引入要改为import方式引入
7、页面中所有的::v-deep和/deep/要改为:deep()
8、vue-router升级到4.5以后name名称必须是唯一的如果有重复的话页面是打不开的因为路由加载就报错了。
9、时间选择器变成了英文查看官方说明要在main.ts里面引入国际化如下
import ElementPlus from element-plus
import zhCn from element-plus/es/locale/lang/zh-cnapp.use(ElementPlus, {locale: zhCn,
})
目前这是我发现的错误升下的就一个页面一个页面点击查看报错修复就行。
