Start by thinking:

Vue project vue-Demo relies on three NPM packages, which are nPM1, Npm2 and NPM3. When you install NPM, it will appear in the node_modoules folder. These three packages can run independently respectively. These three packages can be referenced in improt in VUe-Demo.

At this point, consider whether this is a simple microfront-end pattern. To understand this, you need to export the router, VUex, and CSS in the sub-NPM package for vuE-Demo invocation.

 

1. Create sub-NPM packages first

Create specific steps can find, (such as: www.jianshu.com/p/9a9ed7eaf.) .

1) Export the router

2) To export vuex, create the export.index.js file

3) Export other files such as the CSS

At this point you can export the required files in the outermost index.js file for other projects to call.

 

2. Configure the vue-demo project package.json file

Once you have successfully built the sub-NPM package, you will need to publish the NPM package to the official website www.npmjs.com and introduce it in vue-demo package.js

 

3.Vue-demo imports the NPM package

1) Import NPM’s VUEX into the project

2) Import the router from NPM into the project

 

3) Import other required files

 

 

4. Other

1) Data transfer between packets

Passing data between sub-NPM packages and between sub-NPM and vue-Demo projects can mount the required data to the window. XXXX or VUE instance vue.prototype. XXXX or VUE instance vue.prototype. XXX

 

2) Security issues

Because there is a risk of disclosure when you publish your project package on nPMjs.com, you need to solve the following two problems:

1) Set up Intranet private NPM package management server, and then change the NPM pull address to its own private package address when building and publishing;

2) Use NPM to build a micro front-end project. Every time the dependency package is modified, the package needs to be sent, and then vue-Demo needs NPM install to pull the latest package to update the dependency. Therefore, another method can be used: NPM pulls git project repository and uses it as package.
  "devDependencies": {
    "name1" : "git://github.com/user/project.git#master"."name2" : "git://github.com/user/project.git#develop"
  }
Copy the code