vue打包成组件lib

1、设置打包入口

// 在项目中新建 lib.js 作为组件打包入口，假设放在根目录
import '........../index.scss'; // 各种需要的样式文件

// 可能需要导出vuex的modules，以便在其他项目中引入

const components = {
  Component1,
  Component2,
};

// ops是 Vue.use时，设置的options
const install = function(Vue, opts = {}) {
  Object.keys(components).forEach(componentKey => {
    const component = components[componentKey];
    Vue.component(componentKey, component);
  });
  // 其他一些需要注册的内容
};
export default {
  install,
  ...components
};

2、设置package.json

npm官网配置

1. "name": "lib-name", // 组件名
2. "main": "./lib/lib-name.umd.js", // 组件引入时，默认导出文件
3. "files": [ // 组件打包时，默认打包的文件，可以和.npmignore配合使用
    "lib/*",
    "README.md",
    "package.json"
  ]
4. "scripts": {
    "lib": "vue-cli-service build --target lib --dest lib --name lib-name lib.js",
  }
  // --target lib   将项目中的任何组件以一个库的方式进行构建
  // --dest lib  指定输出目录
  // --name lib-name   打包后组件文件名
  // lib.js 打包入口文件地址

3、部署

方式1、发布到私有npm库（比如nexus等）

• 添加依赖 “lib-name”: “^版本号”,

• 设置lib-name依赖库地址：新建 .yarnrc文件，添加内容：

registry "依赖库地址"

方式2、将代码上传到代码仓库

npm install 地址格式
dependencies格式

• 添加依赖 “cim-lib”: “git+ssh://user@hostname:project.git#master”
• 使用npm或yarn安装
  npm install git+ssh://user@hostname:project.git#master