用element-plus+vue3+ts来写

好的，让我们开始吧！

首先，我们需要在项目中安装 `element-plus`，你可以使用 npm 或 yarn 进行安装，比如：

npm install element-plus --save

或者

yarn add element-plus

安装完成后，我们需要在 `main.ts` 中引入并使用 `element-plus`，代码如下：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

现在我们已经成功引入了 `element-plus`，接下来我们可以开始编写一些组件。

例如，在 `src/components` 目录下创建一个名为 `HelloWorld.vue` 的组件，代码如下：

<template>
  <div class="hello">
    <el-button type="primary" @click="handleClick">Click me!</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'HelloWorld',
  components: {
    ElButton
  },
  methods: {
    handleClick() {
      console.log('Hello, world!')
    }
  }
})
</script>

在这个组件中，我们使用了 `ElButton` 组件，并在它的点击事件中打印了一条消息。

接下来，我们可以在 `App.vue` 中使用这个组件，代码如下：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

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

现在，我们已经成功使用 `element-plus` 来创建了一个简单的组件，并在 `App.vue` 中使用它。