二次封装业务组件，Vue3+Vite+TS 助你开发更轻松！

2024-02-22 10:21:52

前言

作为一名前端开发人员，我们经常需要在不同的项目中使用到相同的组件，比如按钮、表格、弹窗等。为了提高开发效率，我们可以将这些组件封装成一个库，然后在其他项目中直接引用。

使用 Vue3 + Vite + TS 进行二次封装，可以让我们在开发组件库时更加轻松。Vue3 拥有强大的响应式系统，Vite 提供了极快的构建速度，而 TS 则可以帮助我们编写更加健壮的代码。

一、初始化 Vite 项目

首先，我们需要创建一个新的 Vite 项目。我们可以使用以下命令来创建一个 Vue3 + Vite + TS 项目：

npx create-vite-app my-app --template vue-ts

二、安装 Element Plus

接下来，我们需要安装 Element Plus。Element Plus 是一个基于 Vue3 的 UI 组件库，它提供了丰富的组件，可以满足我们的日常开发需求。

npm install element-plus

三、创建组件库

现在，我们可以创建一个新的组件库。在 src 目录下创建一个 components 文件夹，并在该文件夹下创建一个 Button 文件。

src/components/Button.vue

在 Button.vue 文件中，我们可以编写以下代码：

<template>
  <button class="el-button" :type="type">
    <slot></slot>
  </button>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Button',

  props: {
    type: {
      type: String,
      default: 'default'
    }
  }
})
</script>

<style>
.el-button {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #666;
  cursor: pointer;
}

.el-button:hover {
  background-color: #e6e6e6;
}

.el-button:active {
  background-color: #ccc;
}
</style>

四、注册组件

现在，我们需要将我们的组件注册到 Vue 实例中。我们可以修改 main.ts 文件，添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import Button from './components/Button.vue'

const app = createApp(App)

app.component('Button', Button)

app.mount('#app')

五、使用组件

现在，我们就可以在我们的 Vue 应用中使用我们的组件了。比如，我们在 App.vue 文件中可以添加以下代码：

<template>
  <div>
    <Button type="primary">按钮</Button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App'
})
</script>