Vue 将组件打包并发布到npm仓库

Vue

字数统计: 746阅读时长: 2 min

 2023/11/20 

在项目中遇到需要反复使用的代码时，通常会将其封装起来以待下一次的调用。若想要在不同项目里也能使用这些代码时，比较难在众多代码中找到需要的代码。而将组件打包并发布到npm库中，只需要记住相应的包名，便可从npm下载直接安装使用。

全局注册组件

在完成对应组件editor.vue的封装后，在组件存放目录下（这里默认为components)新建一个index.js文件用于将封装好的组件注册为全局组件，内容如下：

import editor from './editor.vue'
const components = [
  editor
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
   // 遍历注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })

  // 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
  }
}

// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
export default {
  install
}

index.js文件存放位置如图所示：

打包组件

修改项目中的package.json文件scripts属性中的内容，增加一条package属性，配置打包命令：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/components/index.js --name 组件名称 --dest 组件名称"
  },
// package参数详情
// 设置--target lib 参数来指定打包的目录
// 设置--name 参数来指定打包后的文件名字
// 设置--dest 参数来指定打包后的文件夹名称