Vue3 & Explain how vue-cli is packaged using --target lib

1. What is lib

1.1 Introduction

After using vue-cli npm run buildto package the project, an entry (usually index.html) will be provided by default, and then a js entry file will be introduced to complete the rendering of the page.
In fact, vue-cli also supports packaging the project as a library. Here you need to use --target libthe command . Will this command package the entry file into a library? For details, please refer to the official explanation
. Next, I will gradually explain in detail how to build your own library.

vite can also build a lib library, the principle is similar, so I won't go into details here.

1.2 Preparations

Here we use vue-cli as a scaffolding tool to create a new vue-projectproject ,

npm install -g @vue/cli 4.5.15
vue create vue-project

The directory structure is shown in the figure:
insert image description here

2. View-cli

2.1 Preparations

2.1.1 Create a new vue-cli-lib-examplelibrary , this project is used as a library

vue create vue-cli-lib-example

insert image description here
I only need to keep this part of the above, and the others can be deleted.

2.1.2 Add the following files under componentsthe directory , the content is as follows:
insert image description here
Among them, components/index.jsthe file is responsible for exporting my-tipthe component

2.1.3 Modify main.jsthe file
insert image description here
As shown in the figure, there are 3 steps here:

Imported index.js file (./components === ./components/index.js)
The method ( ) installis added to the MyTip component (the component is also an object) , which injects the component重点installMyTip
Finally export the components.MyTip object

This install method will be called in two places, namely app.use() and when introducing components, interested students can read the function of Vue3 & app.use and install function

2.2 Configure packages.json & package

2.2.1 Modify packages.json

"scripts": {
    
    
    "build-lib": "vue-cli-service build --target lib --name tips --dest lib --entry ./src/main.js "
  },
"main": "lib/tips.umd.js",

Explain the parameters of build-libthe command

–target lib means that this time the packaging should be in the form of lib
--name tips Indicates the prefix of the packaged file name
–dest indicates the packaged directory name
–entry indicates the packaged entry file

mainThe function is that when other projects introduce this library, they will be searched from lib/tips.umd.jsas the entry point.

umdIt is a modular approach, similarly there are Common.js, ES6, interested students understand by themselves, so I won’t go into details here;

2.2.2 Start packaging

npm run build-lib 或 yarn build-lib

Next you will see the lib directory in the project, as shown in the figure:
insert image description here

2.3 use

There are two ways here, the first is to test locally, the second is to publish through npm publish, and then install it to use the component library. For the convenience of demonstration, the first method is used here. First, we need to execute it vue-cli-lib-exampleunder :

npm link

This command will create a soft connection and put it in the global npm node_modules directory,
and then we execute it in vue-projecrtthe project :

npm link vue-cli-lib-example

This command will be associated with vue-cli-lib-examplethe project , which is equivalent to npm install vue-cli-lib-example, and then we app.vuewill introduce MyTipthe component in , and the calling method is the same as the usual introduction of third-party dependencies

<template>
  <div class="main">
    <h2>This is a component in lib.</h2>
    <MyTip />
  </div>
</template>

<script>
import MyTip from 'vue-cli-lib-example'
export default {
      
      
  name: 'App',
  components: {
      
      
    MyTip,
  }
}
</script>

<style>
#app {
      
      
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

The effect is as shown in the figure:
insert image description here
By the way, we seem to have forgotten one thing, remember the my-tip.css file? It seems that the style does not take effect?
It should be noted here that the css file imported by the component needs to be imported manually

<script>
....
import MyTip from 'vue-cli-lib-example'
// 手动引入
import 'vue-cli-lib-example/src/components/my-tip/my-tip.css'
</script>

The effect is as shown in the figure
insert image description here