vue3+vite自定义封装vue组件发布到npm包的全过程

下面我将详细讲解“vue3+vite自定义封装vue组件发布到npm包的全过程”，并且提供两个示例以供参考。

1. 准备工作

首先，我们需要进行一些准备工作，包括：
- 安装node
- 创建自己的npm账号

2. 创建项目

我们可以使用vue-cli来创建一个基于vue3和vite的vue项目，命令如下：

$ npm install -g @vue/cli
$ vue create my-component-library

在创建时选择插件Babel、Router、Vuex和CSS Pre-processors。

3. 开始编写组件

在src/components目录下创建自己的组件，并通过export暴露出来，例如：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    msg: String,
  },
}
</script>

4. 打包

使用vite进行打包，命令如下：

$ npm install -D vite

在package.json中添加如下scripts：

"scripts": {
  "build": "vite build --lib --name my-component-library src/main.js"
}

执行npm run build即可打包成功。

5. 发布到npm

使用npm发布刚刚打包好的组件，命令如下：

$ npm login
$ npm publish

要注意的是，除了src/components目录下的代码，还需要将打包后的文件放到根目录下。

"main": "dist/my-component-library.umd.js",
"module": "dist/my-component-library.esm.js",
"typings": "dist/my-component-library.d.ts",

示例1

下面是一个简单的HelloWorld组件示例，代码如下：

// src/components/HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
}
</script>

使用@vue/cli的命令行工具创建一个组件库，命令如下：

$ npm install -g @vue/cli
$ vue create my-component-library

在创建时选择插件Babel、Router、Vuex和CSS Pre-processors，然后将src/components/HelloWorld.vue复制到创建出来的my-component-library文件夹里，修改src/App.vue内容如下：

<template>
  <div class="hello">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript Library" />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
}
</script>

最后执行npm run build打包并发布到npm即可。

示例2

下面是一个自定义封装的Button组件示例，代码如下：

// src/components/Button.vue
<template>
  <button :class="className" @click="handleClick">
    <slot>{{ text }}</slot>
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    text: String,
    className: String,
  },
  methods: {
    handleClick() {
      this.$emit('click')
    },
  },
}
</script>

同样是先使用@vue/cli创建一个组件库，然后将src/components/Button.vue复制到my-component-library文件夹里，修改src/App.vue内容如下：

<template>
  <div class="hello">
    <MyButton class-name="my-btn" @click="handleClick">Click me!</MyButton>
  </div>
</template>

<script>
import MyButton from './components/Button.vue'

export default {
  name: 'App',
  components: {
    MyButton,
  },
  methods: {
    handleClick() {
      alert('You clicked the button!')
    },
  },
}
</script>