upgrade: Migrate to Vue 3 #124
Draft
Conversation
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
- Upgrade dependencies to Vue 3, vue-loader 17, element-plus and vue-i18n in package.json - Update public HTML files to use Vue 3 and Element Plus CDN builds. - Keep el-switch height as 20px to match previous design from Element UI. - Migrate app bootstrap to Vue 3 API: use createApp and createI18n in src/main.js and register ElementPlus. - Replace vue-scrollactive with a new in-house ScrollSpy component - Auto formatting by prettier. - Update build config to import VueLoaderPlugin from 'vue-loader'.
- Updated example prop to use defineProps as destructured reactive prop - Use store as reactive entity
- Use useTemplateRef for left container - Use store as reactive shared state. - Initialize LazyLoad as a ref and update lazy-loading logic accordingly.
- Update i18n $t with t - Change Element plus mini size to small as mini is removed - Pass raw store via vue toRaw to fix clone issue with proxy objects as store is reactive
… modernize template
KapilSachdev
force-pushed
the
upgrade/vue3
branch
from
0db3c7d to
fab40a4
Compare
- When moving from element-ui to element plus, we lost the built-in icon font. Element plus has icon library which is Vue specific. To avoid dependency, we are switching to an SVG sprite approach for icons as we only need a few icons. - Integrate an in-house SvgSpritePlugin into build/webpack.config.js - Special handling for svg icons loading (include iconDir, support ?inline) - Add UI icon SVGs in use - update components to use sprite <svg><use href="/asset/sprite.svg#...">
Author
|
Turns out the build process is a bit different. Examples are copied to website but the HTML and some dependency come from apache/echarts-www After building Getting syntax error from below code of vue-i18n : Another non-blocker issue is that SVGs are being duplicated in final build. |
- VueI18n raises ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined in production build - Add missing ElementPlus import in main as we now use it as devDependency
KapilSachdev
force-pushed
the
upgrade/vue3
branch
from
69471b0 to
2b33f59
Compare
- Migrate all SVGs to be compiled into a sprite and used via <use> tags with symbol IDs. - Add utility CSS classes for consistent SVG styling, addressing <use> shadow DOM behavior. - Refactor Sidebar SVGs to use the sprite-based approach instead of CommonJS require. - Move inline SVGs to separate files in the icon/ui folder for better organization.
Author
|
Documentation vue upgrade - apache/echarts-doc#486 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Uh oh!
There was an error while loading. Please reload this page.