vue组件发布成npm包

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则强制内联，区别是最终lib文件夹中不会生成单独的css文件
  // 设置为true，则不会内联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"

// 开发环境执行
npm run start 
// 正式发布执行 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