Vue3 & 详解 vue-cli 使用 --target lib 打包的方式

1. 什么是 lib

1.1 简介

在 vue-cli 使用 npm run build 打包项目后，默认会提供一个入口（通常是 index.html），然后引入一个 js 入口文件完成页面的渲染。
其实 vue-cli 还支持将项目作为一个库的方式来进行打包，这里需要借助 --target lib 命令 ，此命令会将入口文件打包成一个库吗，具体可参考官方解释
接下来我会逐步详解如何构建属于自己的库。

vite 也可以构建 lib 库，原理也是差不多的，这里不在赘述。

1.2 准备工作

这里我们采用 vue-cli 作为脚手架工具新建一个 vue-project 项目，

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

目录结构如图：

2. Vue-cli

2.1 准备工作

2.1.1 新建 vue-cli-lib-example 库，此项目是作为库用的

vue create vue-cli-lib-example

上面我只需保留这一部分，其它都可以删掉。

2.1.2 在 components 目录下新增以下文件，内容如下：

其中 components/index.js 文件负责导出 my-tip 组件

2.1.3 修改 main.js 文件

如图所知，这里分为 3 步骤：

1. 引入了 index.js 文件（./components === ./components/index.js）
2. 在 MyTip 组件（组件也是对象）中添加了 install 方法（重点）&