Vue3组件库开发项目实战——03封装Button组件/输出vitePress文档

Vue3组件库开发项目实战——01组件开发必备知识导学-CSDN博客

Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）-CSDN博客

在前面两篇博客中，我分别介绍了组件库开发必学知识，以及项目所需的所有依赖的引入和安装。在本文将带你动手开发Button组件，并输出vitepress文档中。本文的目标是输出下面的vitePress示例

开发组件使用的是JSX语法，即在js中描述dom的创建，然后使用前面介绍的将vue用在模板中的指令通过js的语法转译。你可能觉得很难看懂，但是不着急，每段代码我都有详细注释。不要轻易放弃，坚持住，不难的。慢慢来吧

 欢迎关注我的git关于这部分的源码

https://github.com/OneDayInMarch/ui-component

点击右上角的Starred ，点击code进行下载

 回顾JSX语法

当在 Vue 3 中结合使用 JSX 时，可以利用 JSX 的灵活性和直观性来创建 Vue 组件。以下是一些在 JSX 中结合 Vue 3 的语法特点：

使用 defineComponent 定义组件： 在 JSX 中，可以使用 defineComponent 函数来定义 Vue 组件，通过 setup 函数来设置组件的逻辑。

import { defineComponent } from 'vue';

const MyComponent = defineComponent({
  setup() {
    return () => (
      <div>Hello, Vue 3 JSX!</div>
    );
  },
});

export default MyComponent;

模板语法： 在 JSX 中，可以直接在组件中使用 Vue 的模板语法，比如插值、指令等。

return () => (
  <div>
    <h1>{msg}</h1>
    <button v-on:click={handleClick}>Click me</button>
  </div>
);

动态属性和事件处理： 可以通过大括号 {} 来动态绑定属性和事件处理函数。

const isDisabled = ref(false);

return () => (
  <button disabled={isDisabled.value} onClick={handleClick}>Click me</button>
);

条件渲染和列表渲染： 可以使用 JSX 的语法来进行条件渲染和列表渲染。

return () => (
  <div>
    {showMessage && <p>{message}</p>}
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  </div>
);

组件嵌套： 可以在 JSX 中嵌套其他组件，实现组件的复用和组合。

const ParentComponent = defineComponent({
  setup() {
    return () => (
      <div>
        <ChildComponent />
      </div>
    );
  },
});

通过结合使用 JSX 和 Vue 3，可以更加灵活地创建复杂的交互式界面，同时充分利用 Vue 3 的响应式系统和组件化能力。

Button初始化

在src/components中新建一个button文件夹。button文件夹下新增src文件夹和index.ts

src里新增button.tsx文件。indext.ts用于将button按钮导出

初始化button.tsx

这部分我截图，你可以跟着敲，不要养成复制代码的习惯。后面会给出较为完整的代码，中间过程就省略了代码复制了。

初始化index.ts

main.ts挂载Button组件