Files
lilishop-ui/manager/MIGRATION-VUE3.md
2026-06-07 16:57:23 +08:00

2.4 KiB
Raw Blame History

manager Vue 3 + Element Plus 迁移说明

已完成(P1–P3 骨架)

  • 依赖升级:vue@3、vue-router@4、vuex@4、vue-i18n@9、element-plus
  • 入口:src/main.js(createApp)
  • 路由、动态路由、全局 $Message / $Modal / $Notice、$filters、priceColorScheme、vue-qr@5
  • TinyMCE:移除已弃用 template 插件

P5 批量修复(Table / 过滤器)

列表页 60+ 已 el-table;过滤器已改为 $filters.*;全项目已无 $set / $options.filters。

P6 表单 / 弹窗(已完成模块)

模块 状态
地区、秒杀设置、分销设置、修改密码、编辑器、链接弹窗 ✅
店铺详情 / 店铺编辑 shopOperation.vue ✅
售后详情 afterSaleOrderDetail.vue ✅
系统设置 sys/setting-manage/**(19 个 vue + template.js) ✅
菜单 / 部门 sys/menu-manage/、sys/department-manage/ ✅
页面装修 views/page-decoration/**(PC + H5 装修、modelList、wap 模板) ✅
文章管理 views/page/article-manage/** ✅
零散页面 礼品卡、个人中心、热区、促销编辑、视频号、错误页、短信签名等 ✅

系统设置包含

  • settingManage.vue(Tab 壳)
  • platformSetting.vue
  • setting/:基础、商品、订单、积分、提现、物流、OSS、短信、客服
  • pay/:支付开关、支付宝、微信
  • authLogin/:登录、QQ、微信
  • smsSettingManage.vue

template.js 中动态组件已 markRaw。

可选后续

  • components/tree-table:旧 JSX 表格,当前路由未引用;Spin 已改 v-loading,beforeUnmount 已对齐 Vue 3
  • 样式文件中残留的 .ivu-* 类名可随页面改版逐步清理(不影响运行)

编译告警处理(2026-05)

  • 全项目 ::v-deep 已改为 Vue 3 推荐的 :deep(...)
  • common.scss 合并 table-common.scss,去掉全局 @import 注入告警
  • vue.config.js 配置 sassOptions.silenceDeprecations 抑制 Sass legacy API 提示
  • common.scss:.search > .el-card + .el-card 恢复列表页双 Card 间距(原 .ivu-card 规则已失效)
  • element.scss:全局 el-table--border 去掉列竖线

本地运行

cd manager
yarn install
yarn run dev

Node 16+,包管理统一 yarn。

上线前检查

四端统一清单(认证、axios、Element Plus、分端专项):../MIGRATION-VUE3.md