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
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐