npm install -g @vue/cli

sudo npm install -g @vue/cli

vue create vue-link-demo

// src/index.js
import HellowWorld from '@/components/HellowWorld.vue';
 
// 將引入的組件模塊存儲，如果是組件庫，則在這里引入多個組件即可
const components = [ HellowWorld ];
 
const install = (Vue,options) => {
  if (install.installed) return;
  install.installed = true
  components.forEach(component => {
  // 這里可以看出，為什么上文強調組件必須有name
    Vue.component(component.name, component)
  })
}
// 如果是直接引入的vue.js方式，則會掛到window下
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 使用Vue.use必須具有install方法
  // https://cn.vuejs.org/v2/api/#Vue-use
  install,
  ...components
}

1. scripts修改start和build命令：

```c
"scripts": {
    "serve": "vue-cli-service serve",
    "start": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js --watch",
    "build": "vue-cli-service build --target lib --name vue-link-demo --dest lib src/index.js",
    "build:app": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

npm run start

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 為false則強制內聯(lián)，區(qū)別是最終lib文件夾中不會生成單獨的css文件
  // 設置為true，則不會內聯(lián)css,最紅lib文件如上圖會有單獨的css文件生成，用戶使用組件包時需要在main.js中手動引入：import 'vue-libs-demo/lib/vue-libs-demo.css'
  css: { extract: true }
})

// 最終lib文件夾生成的umd.js
"main": "lib/vue-link-demo.umd.js"

// 開發(fā)環(huán)境執(zhí)行
npm run start 
// 正式發(fā)布執(zhí)行 npm run build

npm link

npm link vue-link-demo

import olMap from 'ol-map-vue'
import 'ol-map-vue/lib/ol-map.css'
const app = createApp(App)
app.use(olMap)
app.mount('#app')
// 如果為vue2寫法略有不同哦

<template>
  <div class="container">
    <HelloWorld msg="測試組件" />
  </div>
</template>

npm run serve

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

npm publish

npm view react

npm unlink vue-link-demo

npm install vue-link-demo --save

npm run serve