打包自定义组件库

全局安装vue-cli3

npm i @vue/cli -g

搭建项目环境

vue create xxx（项目名）

在components目录下开发组件

// components/comA/index.vue
<template>
  <div>这是组件A</div>
</template>

<script>
export default {
  name: 'comA',
  data() {
    return {}
  },
}
</script>

// components/comA/index.js
import comA from './index.vue'

comA.install = Vue => {
    Vue.component(comA.name, comA)
}

// 全局导入
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(comA)
}

export default comA

// components/index.js
import comA from "./comA/index"
import comB from "./comB/index"
import comC from "./comB/index"

const components = [comA, comB, comC]

const install = Vue => {
  components.map(component => {
    Vue.component(component.name, component)
  })
}

if (window !== undefined && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  comA,
  comB,
  comC,
}

组件库开发可以参考：https://segmentfault.com/a/11...

在package.json中配置打包脚本以及引用入口

{
  "name": "my-lib", // 项目名，也是包名，安装：npm i my-lib,引入：import xxx from 'my-lib' 或 require('my-lib')
  "version": "0.1.0",
  "main": "lib/myComponent.umd.js",// 引用模块时文件入口，比如import xxx from 'my-lib'引入的就是这个指定文件
  "typings": "types/index.d.ts",// ts引用模块时文件入口
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name myComponent --dest lib src/components/index.js" // 打包脚本
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-vue": "^5.0.0",
    "prettier": "^1.19.1",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

package.json字段说明：https://www.cnblogs.com/mengf...
打包脚本配置参考：https://cli.vuejs.org/zh/guid...

打包效果：

在开发组件库时建议配置eslint+prettier校验代码错误和风格，参考：
https://segmentfault.com/a/11...

项目地址：https://github.com/Revelation...