This article will introduce three methods of using one component for multiple vue projects at the front end: npm publish reference, npm link and npm local file reference. This paper mainly recommends the local file reference method

Scheme 1: npm publishing reference

We can maintain the common package by specially assigned personnel. After the common components are written, we can publish them to npm.
The release process is as follows:

In note http://www.npmjs.com Book an account
Enter the common console, enter the command npm login, and enter the newly registered account password as prompted
Enter the command npm publish
Of course, the name common must be registered. This is just an example. When it is really used, it needs to use a package name that is not registered in npm. It should be noted that if an error is reported that you do not have permission to publish the project, it should be that your project name has been used by others. Modify the project name in package.json before publishing.

The programs that develop project1 and project2 use the npm install command to replace common with node_module

npm install common --save

In addition, each time you change the code and publish it again, you need to modify the version number in the package.json file, otherwise the publishing will not succeed.

In this way, the developers of project1 and project2 only need to pay attention to the business functions of their own projects. When the public common is updated, execute the command npm install common.

However, the problem with this scheme is that when the common package is changed frequently, project1 and project2 need to update the introduction of the common package frequently.

Scheme 2: npm link

First, enter the common package and enter it on the console

npm link

This creates a soft connection and saves it to the directory C:\Users\Administrator\AppData\Roaming\npm\node_modules.

Then go to project1 and project2 and enter in the console

npm link common

This brings the public project into the project through soft connection. The following figure shows the node_ The common package in modules is different from other package folders. The common folder is just a soft link.

At this time, modifying any code under the common project will take effect in real time. There is no need to package, update the import package, or restart.

It should be noted that after the project package dependency update, that is, after npm install xxx is executed, the link common project needs to be restarted. Moreover, after using npm link, there is no record in the local package.json, so it is impossible to visually view the reference of the local package.

Scheme 3: npm local file reference (recommended)

Enter project1 and project2 respectively, and enter the command on the console:

npm install ../common/

Where... / common / is the relative path of common. You can also enter the absolute path here.

In this way, the common project is represented as node_module has been introduced into project1 and project2 projects. The components exported by common in index.js can be used normally.

After the command is executed, there will be one more record in package.json

 "dependencies": {
    "common": "file:../common",
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "we-vue": "^2.3.3"
  },

You can also add "AK commonjs": "file:... / common" to package.json, and then execute the npm install command.

Similarly, modifying any code under the common project will take effect in real time. There is no need to package, update the import package, or restart. And there are import records in package.json.

Introducing common components
After the public component is created, it needs to be imported. The import code is the same as that of other components. The code is as follows:

<template>
  <div class="hello">
    <h1 style="text-align: center;">{{ msg }}</h1>
    <player-picker :audios="audios"></player-picker>
  </div>
</template>
<script>
import { playerPicker } from 'common'
export default {
  name: 'HelloWorld',
  components: { playerPicker },
  data () {
    return {
      msg: 'music player ',
      audios: [{
        audioSrc: 'https://m801.music.126.net/20191121202654/e1b93f2bbd9a741dbb6afb2fba7fab8d/jdyyaac/010b/5359/565d/6a7ed7d40cd34dea3ddda7779a460973.m4a',
        duration: 326,
        title: 'The end of the world'
      }, {
        audioSrc: 'http://audio04.dmhmusic.com/71_53_T10041182782_128_4_1_0_sdk-cpm/cn/0208/M00/31/B1/ChR461plD6yARfTFAEEIKD_hxsU439.mp3?xcode=8a44d93c492e630856e62a602d6c4faf12cc3f2',
        duration: 266,
        title: 'Sad Pacific'
      }, {
        audioSrc: 'http://audio04.dmhmusic.com/71_53_T10041184599_128_4_1_0_sdk-cpm/cn/0208/M00/31/B5/ChR47FplIpCAEaVVAEZqHtp44Ks826.mp3?xcode=e8a16a5aa7bb2e5b56e57822bb09de2b96fca9a',
        duration: 288,
        title: 'Difficult Sutra'
      }]
    }
  }
}
</script>

--------
This article is reproduced from the original article of CSDN blogger "milugloomy". The original link is: https://blog.csdn.net/milugloomy/article/details/103187370