mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-07 01:18:54 +08:00
88fc1b0b2a
- 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
43 lines
2.2 KiB
Markdown
43 lines
2.2 KiB
Markdown
# IM 客服端 Vue 3 迁移说明
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3.5 + Vue Router 4 + Pinia 4
|
||
- Element Plus（替代 element-ui）
|
||
- 自研右键菜单 `src/plugins/contextmenu.js`（替代 vue-contextmenujs）
|
||
- `vue-virtual-scroller@3`、`vue-cropper@1.x`、`vue-prism-editor@2.0.0-alpha.2`
|
||
|
||
## 组合式 API 迁移（2026-10 完成）
|
||
|
||
全部 53 个 `.vue` 组件已从 Options API 转换为 `<script setup>`，并完成 vuex → pinia：
|
||
|
||
- **状态管理**：`src/stores/` 下 8 个 store（app/user/talk/notify/settings/emoticon/dialogue/note），对应原 vuex 根 state + 7 个模块；mutation 全部转为同名 SCREAMING_CASE action。原 `src/store/` 已删除。
|
||
- **全局 mixin 保留**：`main.js` 的 `app.mixin(MainMixin)` 依然生效（对 `<script setup>` 组件同样注入），mixin 内部已改用 pinia。**注意**：mixin 经 `this` 回调组件成员时，`<script setup>` 的绑定不会出现在公共实例上——`views/message/index.vue` 采用了 ctx 桥接（`Object.defineProperties(instance.ctx, ...)`）方案，后续若有组件被全局 mixin 回调需用同样方案。
|
||
- **socket 事件层**（`im-server/event/*`、`plugins/ws-socket.js`、`utils/talk.js` 等纯 JS）：vuex 引用全部改为函数内部 `useXxxStore()`。
|
||
- **$user() 名片弹层**（`components/user/user-card/index.js`）：独立子 app 改用独立 `createPinia()`。
|
||
- **app-bridge.js**：保留了 `$store.state.talks.items` 兼容门面（惰性 getter），供旧调用形态使用。
|
||
|
||
## 启动
|
||
|
||
```bash
|
||
cd im
|
||
yarn install
|
||
yarn dev # 端口 8000
|
||
yarn build
|
||
```
|
||
|
||
## 迁移要点
|
||
|
||
1. **入口** `src/main.js` — `createApp`，全局过滤器 `$filters`
|
||
2. **路由** `createRouter` + `createWebHistory`，404 路由 `/:pathMatch(.*)*`
|
||
3. **通知** `im-server/event/talk.js` 通过 `app-bridge` 发 `ElNotification`，避免循环引用
|
||
4. **用户卡片** `$user()` 插件用 `createApp` 挂载
|
||
5. **指令** `v-focus` / `v-paste` / `v-drag` / `v-outside` 已改为 Vue 3 钩子
|
||
6. **SVG** `svg-sprite-loader` + `svg-icon` 全局组件
|
||
7. **生命周期** `destroyed` → `beforeUnmount`；`$set` / `$delete` 已移除
|
||
|
||
## 上线前检查
|
||
|
||
统一清单见仓库根目录：[../MIGRATION-VUE3.md](../MIGRATION-VUE3.md)
|
||
IM 专项见该文档 **「IM 客服端」** 一节。
|