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 步骤：

引入了 index.js 文件（./components === ./components/index.js）
在 MyTip 组件（组件也是对象）中添加了 install 方法（重点），install 里面通过 app 注入了 MyTip 组件
最后导出 components.MyTip 对象

这个 install 方法会有两处地方被调用，分别是 app.use() 和引入组件时，感兴趣的同学可以阅读 Vue3 & app.use 与 install 函数的作用

2.2 配置 packages.json & 打包

2.2.1 修改 packages.json

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

这里解释一下 build-lib 命令的参数

–target lib 表示这次打包要以 lib 的方式
–name tips 表示打包后的文件名前缀
–dest 表示打包后的目录名
–entry 表示打包的入口文件

main 的作用就是当其它项目引入这个库时，会从 lib/tips.umd.js 作为入口寻找。

umd 是一种模块化方式，类似地还有 Common.js、 ES6，感兴趣的同学自行了解，这里不在赘述；

2.2.2 开始打包

npm run build-lib 或 yarn build-lib

接下来你会在项目中看到 lib 目录，如图：
在这里插入图片描述

2.3 使用

这里有两种方式，第一种是本地测试，第二种是通过 npm publish 发布，然后 install 下来即可使用该组件库了。为了方便演示，这里采用第一种，首先我们需要在 vue-cli-lib-example 下执行：

npm link

此命令会创建一个软连接，并放到全局 npm node_modules 目录中，
接着我们在 vue-projecrt 项目中执行：

npm link vue-cli-lib-example

此命令会关联到 vue-cli-lib-example 项目，等同于 npm install vue-cli-lib-example，接下来我们在 app.vue 中引入 MyTip 组件，调用方式跟往常引入第三方依赖一样

<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>

效果如图：
在这里插入图片描述
对了，我们好像还忘记了一件事，还记得 my-tip.css 文件吗？好像样式没生效啊？
这里要注意了，组件引入的 css 文件需要手动引入

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

效果如图
在这里插入图片描述