vue的组件库如何从0开始_vite-plugin-dts

创建项目

然后就是脚手架的选择，既然是 Vue3 组件库，那 Vite 必然是不二之选了。首先它几乎可以说是 Vue3 的官配，其次在做库项目方面，Vite 在打包时没 Webpack 这么麻烦，在开发时也比 Rollup 更容易搭建开发服务。

npm create vite yli-ui --template vue-ts

之后我们把 Git 初始化一下：git init

第一个组件

有了项目之后，我们不管其他乱七八糟的，先来个最简单的组件。

我们先对目录结构做简单的改造，使其适应 Lib 型项目。

这是我们原始创建后的结构：

我们把 public、src/assets、src/components/HelloWorld.vue 删掉，添加src/components/button.vue：

其中的 src/App.vue 和 src/main.ts 保留用于开发组件的时候随时看效果。

接着我们快快地写一个按钮组件，不管其他的，页面上能看到就行。

创建组件

在组件文件夹下创建button.vue文件用于组件代码构建 src/components/button.vue

<template><button class="yli-button"><slot></slot></button>
</template>

<script lang="ts">
import { defineComponent } from 'vue&#
1
2
3
4