新建vue项目

新建一个文件夹，接着cmd内输入:

vue init webpack-simple <project-name>

使用webpack-simple来封装vue插件

创建组件

在src目录下创建lib文件夹，用来存放组件，如下图：

其中index.js的代码如下：

import VirtualList from "./VirtualList";
VirtualList.install = Vue => 
  Vue.compoent(VirtualList.name, VirtualList)

export default VirtualList

如果有多个组件，就重复上述过程。

导出组件

在src目录下创建index.js作为程序入口，将所有组件引入并导出：

import VirtualList from "./lib/virtualList/index";

const components = [
  VirtualList
]

const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component)
  })
}

if(typeof window !== 'undefined' && window.Vue){
  install(window.Vue)
}

export default {
  install,
  VirtualList
}

修改配置文件webpack.config.js

修改配置文件package.json

测试组件

运行

npm run build
npm pack

你会发现在本地文件夹下面生成了一个tgz压缩包

接着在新的vue项目TestB中安装这个包

npm install D:\${'你的路径'}\pi-test-1.0.0.tgz

最后在TestB中引入这个包
单组件引用：

import test from "pi-test"
const {install, VirtualList} = test

全局引用：

import test from "pi-test"
Vue.use(test)

发布

注册npm账户：点这里 (opens new window)

npm login
npm publish
// 再次下载测试
npm install --save pi-test