mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-07 01:18:54 +08:00
- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup> - 四端 vuex 全部移除,状态管理统一迁移至 pinia 4(stores/ 目录) - util.js 等基础设施去除 vm 首参依赖;全局属性($Message/$filters 等)在 script 内改为具名导入 - 被外部 ref 访问的公共组件均已补齐 defineExpose(清单见各端 MIGRATION-VUE3.md) - 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API - 四端 yarn build 全部通过;迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
4.7 KiB
4.7 KiB
manager Vue 3 + Element Plus 迁移说明
已完成(P1–P3 骨架)
- 依赖升级:
vue@3、vue-router@4、vue-i18n@9、element-plus、pinia@4 - 入口:
src/main.js(createApp+createPinia) - 路由、动态路由、全局
$Message/$Modal/$Notice、$filters、priceColorScheme、vue-qr@5 - TinyMCE:移除已弃用
template插件
组合式 API 迁移(2026-10 完成)
全部 280 个 .vue 组件已从 Options API 转换为 <script setup>,并完成 vuex → pinia:
- 状态管理:
src/stores/下 4 个 store(app/user/setting/dict)。app store 合并了原 vuex 根 state(openStyleStore/openStoreId/notices)+ 原 app 模块;mutation 全部转为同名 action,两个例外:pageOpenedListmutation 改名updateOpenedList(避免与 state 同名);clearOtherTags改收路由 name 字符串(不再传组件实例 vm)。原src/store/已删除,package.json 不再依赖 vuex。 - util.js 去 vm 化:
src/libs/util.js的openNewPage(name, argu, query)/initRouter()/initMenuData(data)已去掉 vm 首参,内部直接用useAppStore()。 - defineExpose 清单(被外部通过 ref 访问的组件,改其内部成员时注意保持暴露面):
components/lili-dialog/index.vue:open/singleGoods/clearGoodsSelected/goodsData/goodsFlag/flag/closecomponents/lili-dialog/goods-dialog.vue:typecomponents/verify/index.vue:show/initcomponents/lili/config-drawer.vue:open/closecomponents/lili/department-tree-choose.vue:setData/clearSelectcomponents/map/multiple-map.vue:opencomponents/editor/index.vue(Tinymce):getEditor/setContent/getContentsys/oss-manage/ossManage.vue:selectImage/fileType/changeFileTypecomponents/hotzone/index.vue:open/close;hotzone/components/Hotzone.vue:zones/addItem/eraseItem/isOverRange/overRange/changeItem(被自定义指令经binding.instance/$parent访问);hotzone/components/Zone.vue:showModalFn/delItem/handlehideZone/changeInfopage-decoration/modelForm.vue:navList/topAdvertpromotions/coupon/coupon.vue:check/getSelection/clearSelectAlllive/components/LivePurchaseRecords.vue:refresh
- i18n:script 内
this.$t统一改为i18n.global.t(@/locale),模板$t不变。 - 修复的编译级问题:
page-decoration/wap/index.vue的function package()改名packageModel(保留字)。
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.vuesetting/:基础、商品、订单、积分、提现、物流、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