vue npm 发布自己的组件到npm并使用

关注

原创最新推荐文章于 2026-03-06 00:21:05 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

npm发布自己的组件UI包（详细步骤，图文并茂）目前做前端项目，一直采用的方式去引用别人的组件包，调用方法。其实在开发中，每个开发者基本都写过单独的组件，如何让自己的组件能够重复的利用，如何让别人也享受到您的成果，这里将一步一步地介绍如何通过npm来发布组件包。阅读详情

我们的目标是写一个组件上传到npm，然后可以通过 cnpm install --save kyswitch 的方式去依赖这个组件，像element-ui一样的去使用

import kyswitch from "kyswitch"
import "kyswitch/lib/kyui.css"

Vue.use(kyswitch);

//页面
<ky-switch></ky-switch>

OK 开始吧！

1、首先创建一个vue项目，我用的是脚手架vuecli4.0

创建完成之后我们在根目录建立package文件夹，用来存放我们的组建。

自定义组建大家应该都写过，挂载到全局的组件。

2、创建组建文件夹switch

完整的目录结构

mswitch.vue中的内容就是一个简单的组件如下图：

下面看index.js中的内容，将刚才的组建导入，定义install方法，注册到vue实例上。注意Switch.name，这里是我们使用组件时的标签<ky-switch></ky-switch>。

之后将讲一下为什么要用install方法。

import Switch from "./src/mswitch";
Switch.install = function(Vue) {
    Vue.component(Switch.name, Switch);
};
export default Switch;

OK 创建好了之后我们可以在app.vue中试一下组建好不好用。

main.js中将刚才写好的switch组建引入

import kyswitch from "../package/switch/index.js"

Vue.use(kyswitch);

app.vue中

<ky-switch></ky-switch>

写的没问题的话页面会出现刚才实现的组建。证明组建写的没问题。

下一步我们将自己的组件打包并发布到npm上面

首先我们在之前创建好的package文件夹下创建统一入口 index.js，如果组建多的话，这里是统一入口，内容如下：

// 导入开关选择组件
import kyswitch from './switch'
 
// 存储组件列表
const components = [
    kyswitch
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
    // 判断是否安装
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    kyswitch
}

配置完成之后，接下来打包，之前打包时命令为 npm run build，这是对整个项目打包，我们现在要打包一个库，所以用到了vue的构建目标，官方文档看这里vue构建目标。

下面是官方文档的介绍，好照着撸就行。

打开package.json文件，增加打包命令 lib

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name kyui --dest lib package/index.js"
  },

--name 是输出的文件名字 --dest是打包的文件夹名字入口则是上面提到的 package下面的index.js

在终端输入 npm run lib 得到如下结果

我们可以测试一下打包出来的都东西能不能用，同样在main.js中引入 vue.use( ) ；注意这里需要引入css，因为打包时 css是抽离出来的。

import kyswitch from "../lib/kyui.common.js"
import "../lib/kyui.css"

Vue.use(kyswitch);

app.vue中
<ky-switch />

正常的话页面会展示咱们的组件。现在是不是有点element-ui的使用样子了。但是element的引入方式是 import kyswitch from "kyswitch " 这个怎么做到呢？接下来咱们继续配置package.json。


  "name": "kyswitch",
  "version": "1.0.4",
  "private": false,
  "author": "Mr.xu",
  "repository": "",
  "main": "lib/kyui.common.js",
  "style": "lib/kyui.css",
  "keywords": [
    "vue开关",
    "switch"
  ],
  "files": [
    "lib",
    "package"
  ]

需要有几点注意：

name 是将来npm packages 的包名字，所以尽量取成自己想要的。

version 当前库的版本每次更新npm库版本的时候需要修改

private 这个是私有还是公有，我们在npm官方注册一个账号，当创建一个仓库的时候选择免费的也就是开源的，私有的收费7$。所以直接false就行。

repository 这个是源码地址，一般是个git地址。

main 重要的来了，main是库的入口文件。为什么我们能在 main.js中直接这么引用呢，就是因为有 main这个字段。否则我们得 import kyswitch from "kyswitch/lib/kyui.common.js" 这样引入。

import kyswitch from "kyswitch"
import "kyswitch/lib/kyui.css"

style 样式的入口文件。

keywords 这个是关键字方便查找我们的组建。

files 上传哪些文件到npm的白名单。

我们发布组建的时候只希望发布lib package 文件夹其他的不需要，这怎么设置呢，有两种方式，一个是package.json配置白名单只上传哪些（上面有提到），第二种在根目录建立文件夹.npmignore，这个叫黑名单是告诉哪些不要上传。内容如下：这个叫黑名单

.DS_Store
node_modules/
examples/
packages/
public/
src/
vue.config.js
babel.config.js
*.map
*.html
 
# local env files
.env.local
.env.*.local
 
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

再发布之前得需要有npm的账号，去注册一个账号，之后再项目根目录终端：注意如果你是注册了淘宝镜像，请先切回源镜像npm ：npm config set registry https://registry.npmjs.org