构建组件库遇到的问题汇总

最近需要写一个组件库，一来为了提高自己的水平，二来确实是业务需要。在构建的过程中也出现了很多问题。在这里记录下，以防忘记，不喜勿喷。

一、构建组件库

使用vue-cli4构建。构建完成之后需要在本地测试打包

在地本测试打包

1. 生成dist文件夹

npm run build

2. 生成lib文件夹

npm run lib

3. 生成tgz包

npm pack

使用自定义组件库时遇到的问题

1. 运行npm run serve时报如下错误：

解决方法： 组件写错了。我用的时候写的是

<vx-table ref="vTable" :tableId="'aa'" :tableHeight="300" :tableColumns="columns" :showFooter="true"> </vx-table>

修改后如下：

<Vx-table ref="vTable" :tableId="'aa'" :tableHeight="300" :tableColumns="columns" :showFooter="true"> </Vx-table>

<Vx-table 写成了<vx-table

2. ztree组件也报同样的错误

** 解决方法：在组件库中打包的顺序是：1.npm run build 2. npm run lib 3. npm pack ，步骤一个都不能少，我检查了好几遍ztree组件写法没问题，但是就是总报上图的错。就是因为我没有执行1和2步，直接运行npm pack了，导致一直不行，npm pack的原理需要了解下了。不然就找不到解决方案。**

组件库是这样写的： Ztree.vue组件：

export default {
  name: 'ztree',
  }

Ztree/index.js（ztree按需加载）：

import ztree from './src/Ztree.vue'

ztree.install = function(Vue) {
  Vue.component(ztree.name, ztree)
}

export default ztree

packages/index.js:

import ztree from './Ztree'
const components = [
  ztree
];
const install = function(Vue,opt={}) {
  if (install.installed) return;
  components.map(component => {
    Vue.component(component.name, component)
  })
}
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
// export default install
export default{
  install,
  ...components
};