vue的组件库如何从0开始

最新推荐文章于 2024-08-10 11:32:23 发布

web老猴子

最新推荐文章于 2024-08-10 11:32:23 发布

阅读量2.4k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/web220507/article/details/127193591

版权

这篇博客详细介绍了如何从零开始构建一个Vue3组件库，包括选择Vite作为项目脚手架，创建并展示第一个组件，通过app.use()加载组件资源，配置打包过程，添加类型声明，以及最终的打包和发布步骤。

摘要由CSDN通过智能技术生成

创建项目

然后就是脚手架的选择，既然是 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'

export defaul

关注