封装vue3组件库发布到npm

为了将Vue 3组件库发布到NPM，你需要执行以下步骤：

1. 创建你的组件库项目。
2. 编写你的Vue组件。
3. 设置package.json。
4. 确保你的代码可以正确构建和打包。
5. 发布到NPM。

以下是一个简化的流程：

1. 初始化你的项目并安装Vue：

npm init vue@latest

2. 创建你的组件，例如MyButton.vue：

<template>
  <button class="my-button">{{ label }}</button>
</template>
 
<script>
export default {
  name: 'MyButton',
  props: {
    label: String
  }
}
</script>
 
<style>
.my-button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

3. 在package.json中设置入口文件，例如：

{
  "name": "my-vue-component-library",
  "version": "1.0.0",
  "main": "dist/my-vue-component-library.common.js",
  "files": [
    "dist",
    "src"
  ],
  // ... 其他配置
}

4. 配置构建工具，如Vite、Webpack或Rollup。以下是使用Vite的配置：

{
  "scripts": {
    "build": "vite build"
  }
}

5. 发布到NPM：

首先，确保你有一个NPM账号，如果没有，请注册一个。然后，登录到你的NPM账户：

npm login

最后，发布你的包：

npm publish

确保你的包名在NPM上是唯一的，否则你需要更改package.json中的名称。