A, cause

Elemenu-ui only supports the version of VUe2. X, and our whole project is based on VUe3. If we want to use it in vue3

  • Installation:
npm install element-plus --save
/ / or:
yarn add element-plus --save
Copy the code
  • Introduced in main.ts:
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
Copy the code

OK, normal work!

Second, the problem of

I installed Elemental-Plus using the above steps and it worked. However, one day AFTER I added a dependency package and NPM installed, Elemental-Plus kept reporting errors. After a long time of debugging, I finally found the problem. NPM installed the latest version of Element-Plus, which resulted in a series of errors.

We tried to update the Vue version to Vue3.3+, and element-Plus could be used normally, but this caused another package we used in the project to have problems and could not work normally. Finally, we returned element-Plus to the previous version.

// eg:
npm i element-plus@1.02.-beta71. --save
Copy the code

Third, in-depth

1, devDependencies and dependencies

When we install a module or plug-in using NPM Install, we have two commands to write it to package.json:

- save - dev and save// Short form:- D and SCopy the code

–save-dev installs modules and plug-ins into devDependencies, and –save installs modules and plug-ins into devDependencies.

What’s the difference between devDependencies and dependencies objects in package.json?

The plug-in in devDependencies is only used in the development environment, not in the production environment, and dependencies are published to the production environment. If you don’t need to add element to your project dependencies, you need to add element to your project dependencies. Some of the build tools we use, such as WebPack, are packages that we use in development and don’t care about once they go live, so write them in devDependencies.

2. What happened to NPM install

General process:

Json dependencies and dependencies specified directly in the dependencies and devDependencies properties of package.json;

(2) Recursively acquiring modules: module information — module entity — module dependency;

(3) Module flattening: remove redundant modules; (After V3)

(4) Install the module and update node_modules;

(5) Generate or update version description file.

3. Uncertainty of NPM install

The problem I encountered was because NPM install automatically updated the version. NPM’s dependency version management is very loose. The same project may install different versions of dependencies within a day, and the upgrade of dependency packages may bring bugs.

The version we specify in Dependencies is called the semantic version number. Here’s the rule for semantic version numbers: major version number. Minor version number. Revision number, and the increment rule of the version number is as follows:

  • Major version number: Incompatible API changes were made
  • Minor version number: functionality added for backward compatibility
  • Revision number: Made a backward compatibility issue fix

The version range of dependencies is specified with three symbols:

  • ~ : Updates only the revision number
  • ^ : Upgrade version number and revision number
  • * : Upgrade to the latest version

For example, we have dependencies like this in package.json:

  "dependencies": {
    "echarts": "^ 5.1.1." "."vue": "^ 3.0.11." "
  },
Copy the code

We will know what ^ means and what NPM install will install. In this example, the latest echarts package is allowed to download if the echarts version is older than 5.1.1 and is the same as the larger version (5), which may be 5.2.1 (or whatever) when we install NPM.

The semantic version number defines our desired version update rules, but it is possible for the actual installation to depend on the version to be different from what we specify, which is the problem of NPM install’s uncertainty. To solve this problem, NPM generates package-lock.json files to “lock” version numbers by default in 5.0+.

The rules for NPM Install have changed three times since the release of NPM 5.0:

  • NPM 5.0.x: Package. json: package. lock.json: package. lock.json
  • After 5.1.0, NPM install will ignore package-lock.json to download the latest package;
  • If package.json is changed after version 5.4.2 and package.json and package-lock.json files are different, then NPM will download the latest package according to the version number and semantic meaning in package.json when executing NPM install. And update to package-lock.json. If the two are in the same state, NPM install will download according to package-lock.json, regardless of whether the actual package version of package.json has been updated.

4. Troubleshoot related problems of NPM install

When we get a project, the first step to get it up and running locally is usually NPM install, but NPM install often doesn’t go well, and errors are reported. How do we usually solve it?

1. Debug the error message

There are thousands of reasons for mistakes, which can not be summarized in a single word. At this time, specific problems need to be treated.

2. Check node version and Registry

By checking the Node version and Registry, we can determine whether the package the project depends on is incompatible with the Node version we use, or the package we want to download cannot be downloaded through the current Registry, so as to troubleshoot the problem.

3. Clear the NPM cache

NPM caches the specific version and download links of each package, eliminating the need to go to a remote repository for subsequent queries, thus reducing the number of network requests. But caching can also cause problems. Try clearing the cache:

npm cache clean --force
Copy the code
4. Try YARN

Sometimes NPM install fails, but YARN Install succeeds. Yarn is introduced to solve the problem of NPM V3. In addition to improving the installation speed, the biggest contribution of YARN is to ensure the certainty of installation dependencies through lock files. Installing dependencies in any environment or on any machine will get the same result, that is, the same node_modules directory structure.

Four,

Through this debug, I have learned the following:

(1) Select –save-dev or –save when installing dependencies;

(2) Install dependencies separately to avoid manual modification of package.json or yarn.lock files;

(3) how to troubleshoot problems when NPM install reports errors.