创建vue3+ts+element-plus项目

要创建一个使用 Vue 3、TypeScript 和 Element Plus 的新项目，你可以使用 Vue CLI 来设置这个项目。以下是步骤和示例代码：

1. 确保你已经安装了最新版本的 Vue CLI。如果没有安装，可以通过以下命令安装：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

2. 使用 Vue CLI 创建一个新项目，并在创建过程中选择需要的配置：

vue create my-vue3-ts-project

3. 在创建过程中，Vue CLI 会问你一系列问题来配置你的项目。对于 TypeScript 和 Element Plus，你可以选择：

• 当被问到 "Pick a Vue version" 时，选择 Vue 3。
• 当被问到 "Choose a version of Vue 3" 时，选择 "Vue 3"。
• 当被问到 "Use history mode for router?" 时，选择你的偏好。
• 当被问到 "Pick a state management solution" 时，可以选择 "No" 或者其他你选择的状态管理库。
• 当被问到 "Pick a linter / formatter config" 时，选择你喜欢的代码风格配置。
• 当被问到 "Pick additional lint features" 时，选择你需要的额外 lint 特性。
• 当被问到 "Where do you prefer placing config for Babel, ESLint, etc.?" 时，选择 "In dedicated config files"。
• 当被问到 "Save this as a preset for future projects?" 时，可以选择 "Yes" 如果你想保存这个配置作为将来项目的默认配置。

4. 选择完毕后，Vue CLI 会自动安装所有的依赖并创建项目。
5. 安装 Element Plus：

cd my-vue3-ts-project
npm install element-plus --save
# 或者
yarn add element-plus

6. 在你的 Vue 组件中使用 Element Plus。例如，在 src/components/HelloWorld.vue 文件中：

<template>
  <div>
    <el-button @click="handleClick">Click me!</el-button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { ElButton } from 'element-plus';
 
export default defineComponent({
  components: {
    ElButton,
  },
  setup() {
    const handleClick = () => {
      alert('Button clicked!');
    };
 
    return {
      handleClick,
    };
  },
});
</script>

7. 最后，运行你的项目：

npm run serve
# 或者
yarn serve

以上步骤会创建一个新的 Vue 3 + TypeScript + Element Plus 的项目，并允许你开始开发你的应用程序。