- 搭建 vue 项目
...略
建立 components 文件夹，开发组件
组件B封装
<template>
<div></div>
</template>
...
- 编写index.js，作为暴露组件的出口文件
// 引入组件
import B from "./B.vue";
// 为组件添加 install 方法
B.install = function (Vue) {
Vue.component(B.name, B);
};
export default B
- 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
};
- 在 项目中引用组件，展示 ui
略
- 打包组件库
// --target lib 打包库的命令
// ./components/index 组件库的导出地址
"scripts": {
"build-prod": "vue-cli-service build --target lib ./components/index",
},
- 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
