Vue3 封装组件库并发布到npm仓库-编程知识

一、创建 `Vue3 + TS + Vite` 项目

输入项目名称，并依次选择需要安装的依赖项

npm create vue@latest

项目目录结构截图如下：

二、编写组件代码、配置项和本地打包测试组件

在项目根目录新建 package 文件夹用于存放组件（以customVideo为例，其他类似）

在项目根目录中的 vite.config.ts 中写入相关配置项：

import { defineConfig } from 'vite'
import path, { join } from 'path';
import setupPlugins from "./vite/plugins";
import dts from "vite-plugin-dts"export default defineConfig(({ command, mode }) => {const isBuild = command == 'build'return {publicPath:"/",plugins: [...setupPlugins(isBuild),//生成ts声明文件dts({include:"./package"})],//设置别名resolve: {alias: {"@/package": join(__dirname, './package/')},extensions: [".vue",'.js', '.json', '.ts', '.tsx'],//使用别名省略的后缀名},build: {outDir: "lib", //输出文件名称lib: {entry: join(__dirname, './package/index.ts'), //指定组件编译入口文件name: 'vue3VideoH',fileName: (format) => `index.${format}.js` // 打包后的文件名}, //库编译模式配置rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue"],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: "Vue",},},}, // rollup打包配置}}})

组件封装好之后需要在 customVideo/index.ts 中导出组件

import "./assets/font/iconfont.css"
import "./assets/css/base.less"
import customVideo from "./src/customVideo.vue"export default customVideo

然后还需要在 packages/index.ts 文件中对整个组件库进行导出

import CustomVideo from "./customVideo"
import {App} from "vue";
let comps = [CustomVideo]
const install = (Vue:App) =>{comps.map((component:any)=>{Vue.component(component.__name as string, component);})
}
//使用import.meta.globEager遍历获取文件，会丢失icon图标和style样式
//获取文件
// const components:any = import.meta.globEager('./**/*.vue');
// const install = (Vue:any) =>{
//     for(let i in components) {
//         let component = components[i].default;
//         //注册组件
//         Vue.component(component.__name, component);
//     }
// }let windowObj = window as any
/* 支持使用标签的方式引入 */
if (typeof windowObj !== 'undefined' && windowObj.Vue) {const vm = windowObj.Vue.createApp({})install(vm)
}export default install

在编写组件代码和配置项之后进行本地打包测试组件，在 src/main.ts 中导入刚创建的组件，检测是否正常可用

打包命令 npm run build

import { createApp } from 'vue';
import App from './App.vue';
import './style.css'
import customVideo from "@/package/index";const app = createApp(App);
app.use(customVideo); //全局注册
app.mount('#app');

三、编写package.json、.npmignore 和 README.md 文件

编写package.json 配置文件

{"name": "vue3-video-h","version": "0.0.3","description": "vue3自定义视频播放器","main": "lib/index.umd.js","module": "lib/index.es.js","style": "lib/style.css","types": "lib/index.d.ts","files": ["lib"],"scripts": {"dev": "vite","build": "vue-tsc --noEmit && vite build","preview": "vite preview"},"dependencies": {"less": "^4.1.3","less-loader": "^11.1.3","loader": "^2.1.1","path": "^0.12.7","vite-plugin-compression": "^0.5.1","vite-plugin-dts": "1.4.1","vue": "^3.2.47","vue3-video-h": "^0.0.2"},"devDependencies": {"@types/node": "^20.3.3","@vitejs/plugin-vue": "^4.1.0","typescript": "^5.0.2","vite": "^4.3.9","vue-tsc": "^1.4.2"},"directories": {"lib": "lib"},"keywords": ["vue-video","vue3-video-h","vue3","vue3-video"],"author": "Huang","license": "MIT","homepage": "","repository": "https://gitee.com/Huangxianlong11/vue-plugin/tree/master/customVideo"
}

name : 包名，该名字是唯一的。可在 npm 官网搜索名字，不可重复。

version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。

description: 关于包的描述。

main: 入口文件，需指向最终编译后的包文件。

keywords：关键字，以空格分离希望用户最终搜索的词。

author：作者

license：开源协议

在项目根目录创建 .npmignore 文件，设置忽略发布的文件，类似 .gitignore 文件

# 忽略目录
.idea
.vscode
scripts/
packages/
public/
node_modules/
src/
types/
vite/
yarn.lock# 忽略指定文件
vite.config.ts
tsconfig.json
.gitignore
*.map

编写 README.md 文件

# vue3-video-h> A HTML5 video player component for Vue3## Installation
```bashnpm i vue3-video-h --save```## Usagemain.ts
```
// script
import { createApp } from 'vue';
import App from './App.vue';
import customVideo from "vue3-video-h"
import "vue3-video-h/lib/style.css";//引入样式const app = createApp(App);
app.use(customVideo); //全局注册
app.mount('#app');
```App.vue```
<template><div class="app-container"><customVideo :config="config" /></div>
</template><script setup lang="ts">
import {ref} from "vue";let config = ref({src:"", //视频poster: "", // 初始化占位图片volume: 20,//声音themeColor:"#19accc",//主体颜色activeColor:"red",//选中颜色width:"500px",//宽度height:"300px",//高度
})
</script>
```

四、发布组件到 npm

登录 npm

如果没有 npm 账号，可以去 npm官网注册一个账号，注册成功后在本地查看 npm 镜像

npm config get registry

输出：http://registry.npmjs.org 即可，如果不是则需要设置为npm镜像

npm config set registry https://registry.npmjs.org

切换为npm镜像之后进行登录

npm login

依次输入用户名，密码，邮箱，输出Logged in as…即可

发布组件到 npm

npm publish

发布成功后即可在npm官网搜索到该组件，如下图

并可以通过 npm install vue3-video-h（或 yarn add vue3-video-h ）进行安装

五、npm组件使用

在要使用的项目中安装并注册插件：

yarn add vue3-video-h
# or
npm install vue3-video-h

然后在 main.ts 文件中引入并注册：

import { createApp } from 'vue';
import App from './App.vue';
import customVideo from "vue3-video-h"
import "vue3-video-h/lib/style.css";//引入样式const app = createApp(App);
app.use(customVideo); //全局注册
app.mount('#app');

在要使用组件的页面直接使用即可：

<template></template><div class="app-container"><customVideo :config="config" /></div>
</template><script setup lang="ts">
import {ref} from "vue";let config = ref({src:"", //视频poster: "", // 初始化占位图片volume: 20,//声音themeColor:"#19accc",//主体颜色activeColor:"red",//选中颜色width:"500px",//宽度height:"300px",//高度
})
</script>