Written in the beginning

Vue3 has been in use in the company for a while now, but of course the systems on Vue3 are backend systems that are used by people inside the company, after all, there are a lot of “compatibility” risks involved.

As of the beginning of this year, The uYU Stream leaders have adopted Vue3 as the default version, which also announced that Vue will enter the version 3 era, which is quite a gift to start the New Year.

But there’s more than one New Year’s gift: the Vue3 based Element-Plus component library is getting a stable release, too.

You’ve been “tortured” by the beta, so you’re finally relieved? (✪ ✪ omega)

In this section, we document the problems we encountered in upgrading Element-Plus from beta to stable on our company’s projects.

Json file dependencies from the original project:

{
  "dependencies": {
    "axios": "^ 0.21.1"."core-js": "^ 3.10.0"."echarts": "^ 5.2.2." "."qrcode.vue": "^ 3.3.3"."vue": "^ 3.0.11." "."vue-class-component": "^ 8.0.0-0"."vue-router": "^ 4.0.5"."vuex": "^ 4.0.0"."wangeditor": "^ 4.6.13"."element-plus": 36 "" ^ 1.0.2 - beta.,},"devDependencies": {
    "@types/jest": "^ 24.0.19"."@typescript-eslint/eslint-plugin": "^ 2.33.0"."@typescript-eslint/parser": "^ 2.33.0"."@vue/cli-plugin-babel": "^ 4.5.12." "."@vue/cli-plugin-eslint": "^ 4.5.12." "."@vue/cli-plugin-router": "^ 4.5.12." "."@vue/cli-plugin-typescript": "^ 4.5.12." "."@vue/cli-plugin-unit-jest": "^ 4.5.12." "."@vue/cli-plugin-vuex": "^ 4.5.12." "."@vue/cli-service": "^ 4.5.12." "."@vue/compiler-sfc": "^ 3.0.11." "."@vue/eslint-config-typescript": "^ 5.0.2"."@vue/test-utils": 4 "" ^ 2.0.0 - rc.."eslint": "^ 6.7.2." "."eslint-plugin-vue": "^ 7.8.0"."stylus": "^ 0.54.7"."stylus-loader": "^ 3.0.2." "."typescript": "^ 3.9.9"."vue-jest": "^ 5.0.0-0"."zip-webpack-plugin": "^ 4.0.1." "}}Copy the code

Install the latest element-Plus version

npm install element-plus@2.03. -D
Copy the code

After installation, restart the project, Em… The project will definitely not get up…

An error in a

Because there are two files in the project that refer to the TS type files of the components in the Element-Plus package, the project structure in the Element-Plus stable version has changed slightly, causing problems with the path.

This is easier to solve, directly modify the relevant path can be.

import { NotificationHandle } from 'element-plus/lib/components/notification/src/notification';
Copy the code

Error 2

Because the program used Element-Plus when style files were directly and globally introduced, path issues still arose.

Modify it again.

import 'element-plus/dist/index.css';
Copy the code

An error was reported in the.mjs file

After the element-Plus project is packaged,.mjs files for some components are generated in the Element-plus /dist/locale folder, a class of files related to “internationalization functionality”. The source files are in the Element-plus /lib/locale folder.

The error is that Webpack does not have the built-in ability to process.mjs files. We can configure the rules rule to bypass webPack’s automatic processing.

configureWebpack: {
    module: {
      // https://webpack.docschina.org/configuration/module#rulerules
      rules: [{test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto'}]}}Copy the code

Upgrade the VUE version

This is some vUE method error, we will directly update the VUE version.

NPM install [email protected] - fCopy the code

The –force or -f arguments force the installation of a new version directly, because each time NPM install checks whether node_modules exists, it will not be installed. The –force or -f arguments force the installation of a new version directly.

Upgrade the typescript version

When vUE is updated, the Composition API exported in vUE is lost, either because the Composition API has been redefined, or because of the type problem defined by TS, which is obviously the latter, and it can’t be just a name problem. The answer found in StackOverflow is versioning.

Just upgrade the version, so keep upgrading it.

npm install typescript@4.3. 5 -f
Copy the code

After the upgrade, restart the project, Em… The project is finally running. It’s a small step.

A brief introduction between stable versions

Up to now, on February 28, 2022, there are only four stable versions, which are 2.0.0, 2.0.1, 2.0.2 and 2.0.3, which are all differences between minor versions and have not changed the major version. It is estimated that most of them are just fixes. I checked the update log on the Element-Plus document, tried to upgrade to 2.0.0 and 2.0.3, and compared some of the pages in the project, uh…… Basically, there’s not much difference between the two. If you want to upgrade to a stable version of Element-Plus, you can just go to version 2.0.x.

Page issues with the update to Element-Plus

1. The menu component name is changed

This problem is caused by Elder-Plus changing the name of the original el-Submenu component to el-sub-menu, which can be solved by directly changing the subscript signature.

2. The icon is not displayed

The problem is that the ICONS used in the project have always been displayed in the form of the class name + < I /> tag, which was the original Elemental-UI format, but now Elemental-Plus makes the ICONS a separate component that needs to be installed separately and subcontracted separately.

npm install @element-plus/icons-vue -S
Copy the code

This problem is actually quite uncomfortable, it is all a matter of workload, the whole project needs to change as many ICONS as possible. > _ <

3. The size property of the button component changes

The problem is that Element-Plus redefines the size attribute of the button component. We used medium/small/mini, but now we use large/default/small.

This is another uncomfortable problem. Change the size property of the button component as much as you use it. > _ <

4. Paging component style issues

The pagination component style also seems a bit strange, with the top border missing.

Error: Box-sizing: border-box, height: 36px; error: box-sizing: border-box; (This is just a common style conflict in our company’s project)

5. Hover style problem in the table

The hover attribute in the table has a larger weight than the custom class name added to the column.

This should be easier to change by increasing the weight of the class name in the custom column, or simply by doing so! Important rude solution.

6. The scroll bar in the table uses the self-developed scroll bar component

The scroll bars in the Element-Plus table use our own developed scroll bar component, which causes two problems. First, the scroll bar is thinner, and second, the scroll bar doesn’t show up at first, it doesn’t show up until the mouse moves over it. -. –

7. Any popup or disappearance will cause an error

After clicking on any popover or input box in a project and making the popover disappear or the input box lose focus, the page console will receive an error message.

After careful study, it was discovered that the problem of baidu map was introduced…

Well, first recorded here, behind if there are other problems then fill it, small make up to continue to fix the bug.




At this point, this article is finished, sa Hua Sa hua.

I hope this article has been helpful to you. If you have any questions, I am looking forward to your comments. Same old, likes + comments = you know it, favorites = you know it.