1. npm init vite@latest（vue3+ts）

第一次创建项目第一个默认选择y，我这里面截图因为是第二次创建，所以就没出现。

2. # NPM方式下载element-plus（官方教程地址：https://element-plus.gitee.io/zh-CN/guide/installation.html）

$ npm install element-plus --save

3. 完整引入ElementUi

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

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

4. tsconfig.json指定全局组件类型

// tsconfig.json
"compilerOptions": {
   "types": ["element-plus/global"]
 },

5. 然后就可以把官网示例代码拿出来放在HelloWorld.vue里面

官方示例代码： https://element-plus.gitee.io/zh-CN/component/input.html

<template>
	<el-input v-model="input" placeholder="Please input" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>

6. 最后一步运行项目：npm run dev

效果图如下：
之所以下图有vue的图标是因为APP.vue里面的<img alt="Vue logo" src="./assets/logo.png" />没有删除，删除即可。

项目初始目录结构如下：

图片截屏来源：https://blog.csdn.net/huangpb123/article/details/123313589