为了将Vue 3组件库发布到NPM,你需要执行以下步骤:
- 创建你的组件库项目。
- 编写你的Vue组件。
- 设置
package.json
。 - 确保你的代码可以正确构建和打包。
- 发布到NPM。
以下是一个简化的流程:
- 初始化你的项目并安装Vue:
npm init vue@latest
- 创建你的组件,例如
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>
- 在
package.json
中设置入口文件,例如:
{
"name": "my-vue-component-library",
"version": "1.0.0",
"main": "dist/my-vue-component-library.common.js",
"files": [
"dist",
"src"
],
// ... 其他配置
}
- 配置构建工具,如Vite、Webpack或Rollup。以下是使用Vite的配置:
{
"scripts": {
"build": "vite build"
}
}
- 发布到NPM:
首先,确保你有一个NPM账号,如果没有,请注册一个。然后,登录到你的NPM账户:
npm login
最后,发布你的包:
npm publish
确保你的包名在NPM上是唯一的,否则你需要更改package.json
中的名称。