组件

1、已经写好的业务页面，作为组件打包

在需要打包的目录下新建 index.js 文件，导出需要导出的组件

import HtProcess from './process/processComponent.vue' // vue3 的组件

const components = [
  {name: "HtProcess", component: HtProcess} // 在这里命名组件
]

const HtComponent = {
  install(app) { // 通过app.use()挂载全局组件
    components.forEach(item => {
      app.component(item.name, item.component)
    })
  }
}

export default HtComponent

发布到npm

1、在 package.json 中的script中新增编译库的命令

Vue cli4 库构建

"scripts": {
    vue-cli-service build --target lib --name myLib [entry]
}

--target 构建目标，lib 为库模式
--name 输出的构建目录名称
--dest 构建库的输出目录名称，默认为 dist
[entry] 构建库的入口文件，默认为 src/App.vue

2、发布到npm

配置 package.json

{ 
    "name": "HtComponent", // 报名，需要唯一，在npm上可以根据该名称搜索到
    "version": "0.0.1", // 包的版本号，每次上传需要修改版本号，不能与历史版本号相同
    "private": false, // 是否私有，修改为false发布公网npm
    "main": "dist/HtComponent.umd.js", // 入口文件，上传的编译好的包文件
    "description": "基于vue3,bpmnjs的流程设计器", // 包的描述
    "keyword": "vue3 bpmnjs", // 关键字，
    "author": "langxue", // 作者
    "license": "" // 开源协议
}

3、添加 .npmignore 文件，设置忽略的文件

只需要上传编译好的 HtComponent 目录

node_modules/
public/
src/

vue.config.js
babel.config.js

.env.*

4、登录npm账号

如果使用了淘宝镜像，需要更改为npm镜像

npm config set registry http://registry.npmjs.org

npm login

输入注册的账号 密码 邮箱

npm publish

5、报错

在 npm login 登录的时候，可能会报错，信息如下

# error 426 Upgrade Required - PUT http://registry.npmjs.org/your-packageName

把第四步的修改npm镜像改为 https 即可

Vue cli4 库模式搭建组件库并发布到 npm

组件

发布到npm