从0开发一个 组件/插件 并部署

从零开始发布一个 Vue3 + Vite 的 npm 包

1. npm账号配置

1.1 注册新账号

注册地址： www.npmjs.com/signup

1.2 登录账号

在命令行输入： npm login，此时会提醒你打开浏览器进行登录，然后邮件接收验证码，输入登录

1.3 后续发布会用到的命令行

npm version patch package.json 里的版本号变更，如 1.0.0 变成 1.0.1
npm publish 发布推送

2. 开发 Vue3 + Vite 的组件

2.1 创建一个 Vue 应用

用脚手架创建一个 Vue3 项目，官方创建有两种方式：

• vue-cli 创建(基于 webpack)
• create-vue 创建(基于 vite)

这里选择第二种方式创建，目前最新的 Vue 官方的项目脚手架工具；跟着官方文档走即可：创建一个 Vue 应用
注意 ： 方式二需要、已安装 16.0 或更高版本的 Node.js
这里采用 nvm 安装切换成高版本的node：
nvm install v18.16.0
nvm use v18.16.0

2.2 开发组件

这里开发的是 vue3-plugin-test 组件，举例如下：

2.2.1 开发本地包

在 根目录 src 下新建组件目录： packages，这是最终需要打包发布到 npm 的目录

├─ packages                     
│  ├─ ChartRender   组件目录          
│  │  ├─ index.js   组件入口     
│  │  ├─ index.vue  组件逻辑 
│  ├─ index.js      组件主入口

packages/ChartRender/index.vue 文件 （注意：要使用 export 导出）

<template><div class="chart-render" ref="refChartRender">当前是{{ chartType }}，主题色是{{ params.color }}</div>
</template>
<script setup>
import { ref, onMounted } from "vue";const props = defineProps({chartType: {type: String,required: true,default: "柱状图",},params: {type: Object,default() {return {color: "red",};},},
});onMounted(() => {});
</script>
<script>
export default {name: "ChartRender",
};
</script>

packages/ChartRender/index.js 文件

import ChartRender from './index.vue'
ChartRender.install = app => {app.component(ChartRender.name, 'ChartRender')
}export default ChartRender

packages/index.js 文件

import ChartRender from "./ChartRender/index"const components = [ChartRender
]// 全局安装
const install = app => {components.map(component => {app.component(component.name, component)})
}export default {install,ChartRender
}

注意：如果插件中要引入一些外部功能组件，例如样式库 element、echarts、axios 等，在主入口 packages/index.js 文件中引入

import {Select as TSelect,Option as TOption,
} from 'tdesign-vue-next';// 引入组件库的少量全局样式变量
import 'tdesign-vue-next/es/style/index.css';import ChartRender from "./ChartRender/index"const components = [ChartRender
]// 全局安装
const install = app => {// 判断是否安装if (install.installed) return;app.use(TSelect);app.use(TOption);components.map(component => {app.component(component.name, component)})
}export default {install,ChartRender
}

2.2.2 本地调试

将插件 vue3-plugin-test 打包：

npm run lib
npm link

在测试项目 use-test-plugin （Vue3 + Vite）的根目录 src/main.js 文件中引入：

import { createApp } from 'vue'
import App from './App.vue'import VueChartRender from 'vue-chart-render'
import 'vue-chart-render/dist/style.css';const app = createApp(App)app.use(VueChartRender)
app.mount('#app')

在页面中使用（.vue 文件中）

<template><div><ChartRender :chartType="'折线图'" :params="styleparams" /></div>
</template><script setup>
import { reactive } from "vue";const styleparams = reactive({color: "green",
});
</script>

即可正常显示

3. 打包配置

3.1 vite.config.js配置

build: {lib: {entry: path.resolve(__dirname, 'src/packages/index.js'),  // 打包入口文件name: 'vue3-plugin-test',    // 打包的名字fileName: (format) => `vue3-plugin-test.${format}.js`  // 打包生成的文件名},rollupOptions: {// 不需要打包进库的依赖，忽略vueexternal: ['vue'],output: {// UMD构建模式下为这些外部的依赖提供一个全局变量globals: {vue: 'Vue'}}}}

3.2 package.json 修改

根目录的 package.json 新增以下配置
注意：如果生成的包有样式文件则要配置 style

 "files": ["dist"],"main": "./dist/vue3-plugin-test.umd.js","module": "./dist/vue3-plugin-test.es.js","style": "./dist/style.css", //样式"exports": {".": {"import": "./dist/vue3-plugin-test.es.js","require": "./dist/vue3-plugin-test.umd.js"},//样式"./dist/style.css": {"import": "./dist/style.css","require": "./dist/style.css"}},

配置好之后，开发调试无误、开始打包，执行：npm run build，此时打包生成的 dist 目录，就是我们要发布到 npm 的包。

4. 发布 npm

4.1 发布前新增配置说明文件

进入 dist 目录，生成并配置 package.json 文件，操作如下：
命令行执行： npm init --yes 生成 package.json 文件，修改里面的项目信息即可
同时，在 dist 目录新建 README.md 文件并编辑内容，到时发布后在 npm 的说明展示

官方操作： Creating a package.json file

4.2 发布到 npm

进入 dist 目录，命令行执行登录：
npm login， 此时会提醒你打开浏览器进行登录，然后邮件收到验证码输入登录。
注意： 要先查看当前是否用了淘宝源，如果是淘宝源，则换成 npm

npm get registry   //出现：https://registry.npmmirror.com/
npm config set registry https://registry.npmjs.org/
npm login
......

登录成功，可以执行发布命令：npm publish

如果是更新后重新发布，需要先执行
npm version patch， package.json 里的版本号变更，如 1.0.0 变成 1.0.1
npm publish 发布推送

发布成功，可以去 npm 的 packages 看看，npm install -S vue3-plugin-test下载回来试试使用

4.3 使用 插件

安装： npm i vue3-plugin-test
引入：main.js 文件

import { createApp } from 'vue'
import Vue3PluginTest from "vue3-plugin-test"
import "vue3-plugin-test/style.css"const app = createApp(App)app.use(VueChartRender)

5. 参考资料

• 基于element-ui构建自定义组件库，发布到npm及安装使用，以及生成组件库说明文档：https://zhuanlan.zhihu.com/p/337520239
• 从零开始发布一个 Vue3 的 npm 包：https://juejin.cn/post/7222654249133260856
• 发布到 npm ：https://juejin.cn/post/6844903919106129933
• npm 包本地调试（详细流程：包本地路径、npm link 、yalc）：https://blog.csdn.net/zz00008888/article/details/130271766
• verdaccio 搭建私有 npm仓库