Dev to vue3#246
Open
wenjianzhang wants to merge 94 commits into
Open
Conversation
- 升级Vue 2.7.16 → Vue 3.5.20 - 升级vue-router 3.6.5 → vue-router 4.5.1 - 升级vuex 3.6.2 → vuex 4.1.0 - 升级element-ui → element-plus 2.11.1 - 升级Vue CLI 4.x → 5.0.9 - 升级ESLint和相关插件 - 移除不兼容依赖：@riophae/vue-treeselect、viser-vue、vue-particles - 修复vue.config.js配置兼容性问题 - 更新Node.js引擎要求到>=18.0.0 注意：开发服务器启动存在Progress Plugin配置问题（Vue CLI 5.x已知问题） 下一步需要更新应用代码以适配Vue 3 API
主要更新： - 更新src/main.js为Vue 3语法 (createApp, 插件注册, 全局属性) - 更新src/router/index.js为Vue Router 4 (createRouter, createWebHistory) - 更新src/store/index.js为Vuex 4 (createStore) - 更新.eslintrc.js为Vue 3 ESLint配置 - 修复Pagination组件命名为AppPagination（符合多单词组件命名规范） - 更新所有页面中的pagination标签为app-pagination - 修复vue.config.js配置以减少开发环境问题 Vue 3核心功能已验证可用，剩余51个ESLint兼容性警告待后续处理
- 修复组件命名：Bar→AppBar, Cell→AppCell, Keyboard→AppKeyboard, Parser→AppParser, Hamburger→AppHamburger, Screenfull→AppScreenfull - 修复props突变问题：ImageCropper组件imgFormat prop, Account组件user prop - 修复v-model语法错误：userAvatar组件对话框显示控制 - 修复重复key问题：ImageCropper组件中的imgFormat和isSupported - 继续优化v-slot和slot属性使用 ESLint错误统计： - vue/valid-v-slot: 84个 - vue/multi-word-component-names: 31个 - vue/no-deprecated-slot-attribute: 21个 - vue/valid-v-model: 18个 - vue/no-mutating-props: 17个
- 移除 vue/name-property-casing 规则（Vue 3 中已废弃） - 将 vue/no-deprecated-slot-attribute 改为警告 - 将 vue/multi-word-component-names 改为警告 - 修复 LoginPage 组件名为多词 - 移除未使用的 loadSlim 导入 - 运行 npm run lint --fix 自动修复 ESLint 问题减少: - 修复前: 414 个问题 (242 errors, 172 warnings) - 修复后: 113 个问题 (53 errors, 60 warnings) - 减少: 73%
- 修复 userInfo.vue: 创建本地 userForm 副本，避免直接修改 prop - 修复 Account.vue: 创建本地 userForm 副本 - 修复 UserCard.vue: 将过滤器改为方法 uppercaseFirst() ESLint 错误修复: - prop mutation 错误: 从 6 个减少到 0 个 - deprecated filter 错误: 从 1 个减少到 0 个 - 总问题: 113 → 106 (-6%)
- genInfoForm.vue: 创建 formData 本地副本，使用 watch 双向同步 - gen/index.vue: 移除错误的 #reference 指令 ESLint 优化: - prop mutation: 修复 8 个错误 - v-slot 错误: 修复 4 个错误 - 总问题: 106 → 95 (-10%)
安装 Vue 3 生态工具: - 添加 @vueuse/core (Vue 3 组合式工具库) 清理 Vue 2 API: - 移除所有 $listeners (Vue 3 中 attrs 自动包含事件) - 更新生命周期钩子: beforeDestroy → beforeUnmount - 修复 dialog slot 语法: slot="footer" → #footer - 重命名 element-ui.scss → element-plus.scss - 更新 adaptive.js 使用原生 resize 事件 文件修改: - SvgIcon/index.vue: 移除 v-on="$listeners" - generator/html.js: 移除 $listeners，更新 slot 语法 - ResizeHandler.js, resize.js mixins: beforeDestroy → beforeUnmount - directive/el-table/adaptive.js: 使用原生事件替代 element-ui 工具 ESLint: 95 problems (32 errors, 63 warnings)
- importTable.vue: 添加 'ok' 事件声明到 emits - gen/index.vue: 移除空 template 标签，组件名 Gen → CodeGen - swagger/index.vue: 组件名 Swagger → SwaggerDoc - 401.vue: 组件名 Page401 → ErrorPage401 ESLint: 90 problems (-5, 32 errors, 58 warnings)
- 更新开发环境 API 地址配置 - 完善 .gitignore 忽略规则 - 调整 package.json 依赖版本 - main.js 全局注册与初始化优化 - permission.js 路由守卫逻辑优化 - settings.js 新增默认配置项 - store/modules 状态管理逻辑修复
- variables.scss 更新设计 Token（主色 #1677ff、圆角、阴影） - element-plus.scss 深度覆盖 Element Plus 组件样式 - admin.scss 新增 .search-form、.toolbar、.form-header 等通用布局类 - sidebar.scss 侧边栏样式精细化调整 - btn.scss 按钮辅助样式更新 - index.scss 全局样式入口整理
- AppMain 修复 padding-top 动态计算（根据 fixedHeader+tagsView 状态） - Navbar 顶部导航栏样式精细化 - Sidebar 侧边栏组件结构与样式优化 - TagsView 多标签页视觉升级 - Logo 组件样式调整
- ChartCard 重构：新增 color prop、左侧彩条、icon 插槽水印 - MiniArea/MiniBar 图表颜色统一为 #1677ff - MiniProgress 支持渐变色（linear-gradient） - RankList 新增金银铜渐变徽章样式 - Bar 图表渐变填充（#40a9ff → #1677ff） - ErrorLog 修复 v-slot 语法错误 - Upload 组件修复未使用变量问题
- KPI 卡片新增品牌色左侧彩条（蓝/绿/橙/紫） - 每张卡片添加 Remix Icon 大图标水印 - 销售额排行榜金银铜渐变徽章 - 运营活动进度条改为蓝色渐变 - 图表色系统一为 Ant Design Blue 色板
统一各页面设计规范，对齐 sys-dept 黄金标准： - 搜索区域统一 class="search-form" 卡片风格 - 工具栏改为 flex .toolbar 布局（替代 el-row/col span=1.5） - 按钮统一 size="small"，添加 Element Plus 图标 - 表格操作列改为 link 类型 + el-divider 分隔 - 表格统一添加 stripe 属性 - 状态列统一使用 el-tag（success/danger） - 涉及：用户/角色/菜单/部门/岗位/字典/接口/登录日志/操作日志/参数配置
- 定时任务列表：搜索栏/工具栏/表格/操作列规范统一 - 状态改为 el-tag 展示，操作按钮加 link 样式 - 代码生成列表：搜索栏图标、工具栏 flex 布局、操作列 link 化 - gen 子表单（basicInfoForm/editTable/genInfoForm/importTable）兼容性修复
- 登录页 UI 重构，布局与样式现代化 - 401 错误页样式修复 - 个人中心页面组件兼容性修复 - 系统监控、日志查看、Excel 上传等页面小幅优化 - redirect 页面 Vue 3 兼容修复
- 统一响应拦截处理逻辑 - 错误码处理增强（401/403/400） - 请求头 Token 注入优化
There was a problem hiding this comment.
Pull request overview
This PR begins a broad Vue 2 / Element UI to Vue 3 / Element Plus migration for the go-admin UI, touching framework setup, routing/store initialization, UI components, styles, and many feature views.
Changes:
- Upgrades core dependencies and app bootstrap to Vue 3, Vue Router 4, Vuex 4, Element Plus, and related tooling.
- Migrates many templates from Vue 2 slot/listener syntax to Vue 3 syntax and replaces Element UI icons.
- Adds Vue 3 migration documentation and updates styling/theme/sidebar/dashboard components.
Reviewed changes
Copilot reviewed 119 out of 129 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
.env.development |
Updates development API base URL and Sass warning env. |
.env.production |
Adds Sass warning suppression env. |
.eslintrc.js |
Updates ESLint parser and Vue 3 lint preset. |
.gitignore |
Adds Claude-related ignored files. |
App.vue |
Moves analytics script into component lifecycle. |
UPGRADE_TO_VUE3.md |
Adds Vue 3 migration plan/progress documentation. |
VUE3_UPGRADE_COMPLETE.md |
Adds/updates Vue 3 upgrade completion documentation. |
babel.config.js |
Adds Vue JSX Babel plugin. |
index.html |
Simplifies favicon/title metadata. |
package-clean.json |
Adds/updates package cleanup artifact. |
package.json |
Upgrades Vue 3/Element Plus dependencies and build tooling. |
test-vue3.js |
Adds/updates Vue 3 test helper/script. |
vite.config.js |
Adds/updates Vite configuration placeholder. |
vue.config.js |
Updates dev-server, webpack fallback, Vue loader, and split chunks config. |
src/main.js |
Replaces Vue 2 bootstrap with Vue 3 createApp setup. |
src/permission.js |
Updates router dynamic route registration and Element Plus messages. |
src/router/index.js |
Migrates router setup to Vue Router 4. |
src/settings.js |
Disables top navigation by default. |
src/store/index.js |
Migrates Vuex store creation to Vuex 4. |
src/store/modules/permission.js |
Updates dynamic route generation/loading for Vue Router 4. |
src/store/modules/system.js |
Adds default system info fallback. |
src/store/modules/user.js |
Updates route injection and promise flow. |
src/utils/dialog.js |
Converts dialog drag directive to exportable Vue 3 directive object. |
src/utils/error-log.js |
Exports Vue 3 app error-handler setup. |
src/utils/generator/html.js |
Updates generated dialog slot/listener syntax. |
src/utils/request.js |
Migrates request notifications to Element Plus. |
src/vendor/Export2Excel.js |
Updates XLSX import style. |
src/styles/btn.scss |
Converts Sass import to @use. |
src/styles/element-theme.css |
Keeps theme artifact placeholder. |
src/styles/element-theme.js |
Keeps theme artifact placeholder. |
src/styles/element-ui.scss |
Removes old Element UI overrides. |
src/styles/element-variables.module.scss |
Adds Element Plus theme variable module. |
src/styles/element-variables.scss |
Updates theme variables for Element Plus. |
src/styles/index.scss |
Switches global style imports to Sass @use. |
src/styles/sidebar.scss |
Updates sidebar styles for Element Plus markup/classes. |
src/styles/variables.module.scss |
Adds/updates variables module placeholder. |
src/styles/variables.scss |
Updates sidebar theme colors. |
src/icons/index.js |
Changes SVG icon registration to exported component. |
src/directive/el-table/adaptive.js |
Migrates table adaptive directive hooks. |
src/layout/index.vue |
Updates layout component name and Sass imports. |
src/layout/mixin/ResizeHandler.js |
Renames destroy hook for Vue 3. |
src/layout/components/AppMain.vue |
Adds fixed-header padding computation. |
src/layout/components/Navbar.vue |
Migrates dropdown/listener syntax and icons. |
src/layout/components/Sidebar/FixiOSBug.js |
Guards Element Plus submenu mouseleave patch. |
src/layout/components/Sidebar/Item.vue |
Rewrites functional menu item render for Vue 3. |
src/layout/components/Sidebar/Link.vue |
Rewrites sidebar link rendering. |
src/layout/components/Sidebar/Logo.vue |
Updates logo fallback behavior and styling. |
src/layout/components/Sidebar/SidebarItem.vue |
Migrates submenu markup to Element Plus. |
src/layout/components/Sidebar/index.vue |
Enables router mode on sidebar menu. |
src/layout/components/TagsView/ScrollPane.vue |
Updates wheel listener and deep selector syntax. |
src/layout/components/TagsView/TagsView.vue |
Adds alternate Vue 3 tabs-based tags view. |
src/layout/components/TagsView/index.vue |
Migrates tag labels and styles for Vue 3/Element Plus. |
src/components/Bar.vue |
Replaces Viser bar chart with ECharts. |
src/components/Cell/index.vue |
Renames component. |
src/components/ChartCard/index.vue |
Restyles KPI card and adds icon/color support. |
src/components/Charts/Keyboard.vue |
Updates ECharts import and lifecycle hook. |
src/components/Charts/LineMarker.vue |
Updates ECharts import and lifecycle hook. |
src/components/Charts/MixChart.vue |
Updates ECharts import and lifecycle hook. |
src/components/Charts/mixins/resize.js |
Renames destroy hook for Vue 3. |
src/components/ErrorLog/index.vue |
Migrates dialog/table slots and click handling. |
src/components/FormGenParser/Parser.vue |
Removes Vue 2 $set usage. |
src/components/Hamburger/index.vue |
Adds emits declaration and renames component. |
src/components/HeaderSearch/index.vue |
Updates deep selector syntax. |
src/components/IconSelect/index.vue |
Migrates input event and suffix slot. |
src/components/ImageCropper/index.vue |
Renames destroy hook for Vue 3. |
src/components/MDinput/index.vue |
Switches icon class prefix. |
src/components/MiniArea/index.vue |
Replaces Viser mini area chart with ECharts. |
src/components/MiniBar/index.vue |
Replaces Viser mini bar chart with ECharts. |
src/components/MiniProgress/index.vue |
Updates progress styling API. |
src/components/Pagination/index.vue |
Migrates internal Element Plus pagination binding. |
src/components/RankList/index.vue |
Restyles dashboard ranking list. |
src/components/RightPanel/index.vue |
Updates icons and lifecycle hook. |
src/components/Screenfull/index.vue |
Renames component and lifecycle hook. |
src/components/Share/DropdownMenu.vue |
Minor style tag cleanup. |
src/components/SvgIcon/index.vue |
Removes Vue 2 listener forwarding. |
src/components/ThemePicker/index.vue |
Updates Element Plus package references. |
src/components/TopNav/index.vue |
Migrates top menu/submenu rendering. |
src/components/Trend/index.vue |
Replaces Element UI caret icons. |
src/components/Upload/SingleImage.vue |
Updates icons and Sass imports. |
src/components/Upload/SingleImage2.vue |
Updates upload/delete icons. |
src/components/Upload/SingleImage3.vue |
Updates icons and Sass imports. |
src/components/UploadExcel/index.vue |
Updates XLSX import style. |
src/views/admin/dict/data.vue |
Migrates dict data page controls, dialogs, and pagination syntax. |
src/views/admin/dict/index.vue |
Migrates dict type page controls, dialogs, and pagination syntax. |
src/views/admin/sys-api/index.vue |
Migrates API management page drawer/table syntax and icons. |
src/views/admin/sys-config/index.vue |
Migrates config page slots/dialog/pagination syntax. |
src/views/admin/sys-login-log/index.vue |
Migrates login log page controls/table/pagination syntax. |
src/views/admin/sys-oper-log/index.vue |
Migrates operation log page controls/table/dialog syntax. |
src/views/admin/sys-post/index.vue |
Migrates post page toolbar/table/dialog syntax. |
src/views/admin/sys-role/index.vue |
Migrates role page toolbar/table/dialog syntax. |
src/views/admin/sys-user/index.vue |
Migrates user page controls/dialogs and treeselect dependency. |
src/views/dashboard/admin/components/BarChart.vue |
Rewrites chart component for ECharts 5/Vue 3. |
src/views/dashboard/admin/components/LineChart.vue |
Rewrites line chart component for ECharts 5/Vue 3. |
src/views/dashboard/admin/components/PanelGroup.vue |
Adds component name/emits metadata. |
src/views/dashboard/admin/components/PieChart.vue |
Rewrites pie chart component for ECharts 5/Vue 3. |
src/views/dashboard/admin/components/RaddarChart.vue |
Rewrites radar chart component for ECharts 5/Vue 3. |
src/views/dashboard/admin/components/TodoList/Todo.vue |
Adds component name/emits metadata. |
src/views/dashboard/admin/components/TodoList/index.vue |
Replaces filters and migrates event/style syntax. |
src/views/dashboard/admin/components/mixins/resize.js |
Renames destroy hook for Vue 3. |
src/views/dashboard/admin/index.vue |
Migrates dashboard slots/icons and chart presentation. |
src/views/dashboard/index.vue |
Renames dashboard component. |
src/views/dev-tools/gen/basicInfoForm.vue |
Migrates generator basic info form to local form data/slots. |
src/views/dev-tools/gen/editTable.vue |
Migrates table edit slots/icons. |
src/views/dev-tools/gen/genInfoForm.vue |
Migrates generator info form to local form data/slots. |
src/views/dev-tools/gen/importTable.vue |
Migrates import dialog and pagination syntax. |
src/views/dev-tools/gen/index.vue |
Migrates code generator list, preview dialog, icons, and styles. |
src/views/dev-tools/swagger/index.vue |
Renames component. |
src/views/error-page/401.vue |
Migrates dialog syntax and component name. |
src/views/excel/components/AutoWidthOption.vue |
Adds component name/emits metadata. |
src/views/excel/components/BookTypeOption.vue |
Adds component name/emits metadata. |
src/views/excel/components/FilenameOption.vue |
Migrates input prefix slot and metadata. |
src/views/log/index.vue |
Adds named container component. |
src/views/profile/components/Account.vue |
Adds local user form copy and component name. |
src/views/profile/components/Activity.vue |
Updates icons and component name. |
src/views/profile/components/Timeline.vue |
Adds component name. |
src/views/profile/components/UserCard.vue |
Replaces Vue filter usage with method. |
src/views/profile/index.vue |
Migrates card header slots and component name. |
src/views/profile/userAvatar.vue |
Migrates avatar dialog and cropper event syntax. |
src/views/profile/userInfo.vue |
Switches profile form binding to local copy. |
src/views/redirect/index.vue |
Adds component name. |
src/views/schedule/index.vue |
Migrates scheduler page controls, slots, dialog, and pagination syntax. |
src/views/schedule/log.vue |
Migrates lifecycle hook and removes old icon props. |
src/views/sys-tools/monitor.vue |
Migrates slots/icons and lifecycle hook. |
Comments suppressed due to low confidence (1)
src/views/profile/userAvatar.vue:44
- These rotate controls used to be icon-only buttons, but the migration removed the
iconprops without adding replacement icons or text. They now render as blank buttons, making the avatar editor controls unusable.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+21
to
+22
| name: 'PaginationComponent', | ||
| emits: ['update:page', 'update:limit', 'pagination'], |
| </el-dialog> | ||
| <!-- 用户导入对话框 --> | ||
| <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" :close-on-click-modal="false"> | ||
| <el-dialog v-model="open" :title="upload.title" width="400px" :close-on-click-modal="false"> |
|
|
||
| <!-- 分配角色数据权限对话框 --> | ||
| <el-dialog v-if="openDataScope" :title="title" :visible.sync="openDataScope" width="500px" :close-on-click-modal="false"> | ||
| <el-dialog v-if="openDataScope" v-model="open" :title="title" width="500px" :close-on-click-modal="false"> |
| <!-- 预览界面 --> | ||
|
|
||
| <el-dialog class="preview" :title="preview.title" :visible.sync="preview.open" :close-on-click-modal="false" fullscreen> | ||
| <el-dialog v-model="open" class="preview" :title="preview.title" :close-on-click-modal="false" fullscreen> |
Comment on lines
+4
to
+6
| <el-menu-item v-if="onlyOneChild.meta" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> | ||
| <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> | ||
| </el-menu-item> |
Comment on lines
+85
to
+87
| app.use(store) | ||
| app.use(router) | ||
| app.use(permission) |
| }, | ||
| data() { | ||
| return { | ||
| userForm: { ...this.user }, |
Comment on lines
64
to
66
| if (!this.chalk) { | ||
| const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css` | ||
| const url = `https://unpkg.com/element-plus@${version}/lib/theme-chalk/index.css` | ||
| await this.getCSSString(url, 'chalk') |
| mounted() { | ||
| // 声明: 百度统计统计相关下载使用量无别的用途 | ||
| // 可自行删除 | ||
| var _hmt = _hmt || [] |
Comment on lines
+35
to
+38
| <el-button size="small" @click="changeScale(1)" /> | ||
| </el-col> | ||
| <el-col :lg="{span: 1, offset: 1}" :md="2"> | ||
| <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" /> | ||
| <el-button size="small" @click="changeScale(-1)" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.