preface

During development, there are only small differences between business projects, and most of the code is highly overlapping. In this case, the easiest thing to do is to copy and paste the previous project and continue development based on the previous project, but there is a lot of duplicate code, and updating a common module requires repeated changes to multiple projects, which is not easy to maintain and error prone.

Prior to the microfront, most of the approach was to use unpacking to separate common code into a separate NPM Module and have different business projects reference the NPM package. But there are two drawbacks:

  1. Every time the common code base is updated, each project needs to be re-installed.
  2. Unpacking requires a certain amount of effort to pull reusable modules from business items into a new package.

If we use EMP micro front-end way to achieve, can solve the NPM bring method. While ensuring high project reuse and high decoupling, it also improves development efficiency.

1. To do a Vue2 based micro-front-end project

Implement a Vue – based micro – front-end architecture

  • Components can be shared

  • Automatically updates shared component changes

  • Using a simple

  • Easy maintenance

  • Small changes to the original project

2. Design a micro-front-end based on Vue2

Contains the following two parts:

  • A project that hosts common components, functions, and so on.

  • The project that carries the components, functions, and so on of the business.

3. Make it happen

3.1. Create a project

Create projects that host common components, functions, and so on

On the cli, run the emp-cli init command to run the following command:

npx @efox/emp-cli init

Enter a project name, then select vuE2-base, put the public part in the base project, follow the instructions

NPM run dev or YARN devAfter starting the project:

Create projects that host the components, functions, and so on of the business

Again from the command line with emp-cli init command, execute the following command:

npx @efox/emp-cli init

  • Enter a project name and select vue2-project, put the business part in the project and follow the instructions

NPM run dev or YARN devAfter starting the project:

The program

For an existing project migration, see @vue/ CLI Vue2 template migration to microfront-end EMP

3.2 Undertake the project development of the common part

The project hosting the common part is an independent project. The core idea is to expose the components, functions, and so on of the project for external projects to use.

Open the base project you just created:

First, emp-CLI generated vue2 projects are not very different from vuE2 projects generated with VUE-CLI, so there is no change in development practices.

The difference is that this project can expose components, functions, and so on for use by external projects. At that point, it may still be cloudy.

Expose the project component only need two steps to the Content components (located in the SRC/components/content. vue) as an example,

  1. The mf configuration directory is located in the root directory emp_config. The MF development environment is configured with emp_config/mf-development.js, and the MF production environment is configured with emp_config/mf-production.js

  2. Define the exposed alias and the relative path of the component in the EXPOSURE configuration of the MF:


module.exports = {

name: 'vue2Base'.filename: 'emp.js'.remotes: {},

exposes: {

'./Content': './src/components/Content'.// 'component alias' :' component relative path '

},

shared: ['vue/dist/vue.esm.js'],}Copy the code

After the above three steps, the Content component of Base is available for other projects to call.

3.3 Carry out project development of the business part

The project carrying the business part is an independent project. The core idea is to introduce components and functions of base and reuse base content efficiently.

While the previous section quickly covered exposing a Vue component on a Base project, this section focuses on how to introduce a Base component.

Opening the project project is not much different from Vue2 project in VUE-CLI:

It can be found that the Content component referenced by the project does not exist in the project and is exposed by the reference to the Base project. However, references are made in the same way as native code.

There are only two steps to introducing the components of a public project. Take the Content component exposed by the project that introduced the public part in the previous section.

  1. The mf configuration directory is located in the root directory emp_config. The MF development environment is configured with emp_config/mf-development.js, and the MF production environment is configured with emp_config/mf-production.js

  2. In remotes for mf configuration, define names and addresses that reference aliases and bases:


module.exports = {

name: 'vue2Base'.filename: 'emp.js'.remotes: {

'@v2b': 'vue2Base@http://localhost:8009/emp.js'.// 'base alias' :' base name '@base project emp.js address

},

exposes: {},

shared: ['vue/dist/vue.esm.js'],}Copy the code
  1. Introduce Content as an internal project component

import Content from "@v2b/Content"

// import component name from "base alias/component name"

Copy the code
  1. Use as a normal component
<template> <div class="main"> <h1>Project App</h1> <img :src="require('./logo.png')" alt="logo" /> <Content /> </div> </template> <script> import Content from "@v2b/Content" // import component name from "base alias/component name" export default {components: { Content }, }; </script>Copy the code

At this point, you have introduced the Content component of the Base project into the Project project

4. To summarize

  1. Fast, using EMP can quickly transform Vue2 projects into micro front-end projects.

  2. The learning cost is low. Only the MF configuration is required

  3. Perfect supporting facilities, mature ecology.

  4. Summary of MF use

  • Exposes: Exposes the contents of an item to the outside

  • Remote: Introduce external project exposure

  • Share: shared library instance