vue 组件库开发

1. 搭建 vue 项目

...略

2. 建立 components 文件夹，开发组件

3. 组件B封装

<template>
  <div></div>
</template>
...

4. 编写index.js，作为暴露组件的出口文件

// 引入组件
import B from "./B.vue";
// 为组件添加 install 方法
B.install = function (Vue) {
  Vue.component(B.name, B);
};
export default B

5. index.js 下统一导出

import B  from './index';

const components = [
    B
]
// Vue的 install 方法。
// 第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
const install = function(Vue){
  components.forEach(component=>{
      Vue.component(component.name, component)
  })
}
// 判断环境
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
// 导出
export default {
  install,
  B 
};

6. 在 项目中引用组件，展示 ui

略

7. 打包组件库

// --target lib 打包库的命令
// ./components/index 组件库的导出地址
"scripts": {
        "build-prod": "vue-cli-service build --target lib ./components/index",
},

8. NPM包发布
   配置package.json文件

{
  "main": "dist/xx-ui.js", // 组件库入口文件
  "keywords": ["vue","element"], // 关键词
  "files":["dist", "components"] // 要发布到npm的目录
...
}

发布 npm 包（私包）

# 创建用户  
npm adduser --registry http://10.0.0.xx/
  
# 发包        
npm publish --registry http://10.0.0.xx/

# 依赖包发生更改时，version增加一个版本号，再次发布      
npm publish --registry http://10.0.0.xx/

# 删包        
npm unpublish <package_name> --force --registry http://10.0.0.xx/

// 参考：https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB%B6