1、初始化（从0开始练习Vue3+Vite+Ts）

创建项目

Vite 需要 Node.js 版本 >= 12.0.0。建议使用 v16版本的 Node.js，我这里使用的是v16.15.1
安装vite
npm init vite@latest
创建项目
npm create vite@latest

接下来填写项目名称、选择vue、选择Typescript

cd vue3-study（将文件切换到该文件夹）
npm installl （安装项目依赖）
npm run dev （运行项目）

打开看看启动成功，CTRL+C 停止。然后用习惯的vscode编辑器打开项目，进行进一步配置。

安装Element-Plus
npm install element-plus --save
引入element-plus/icons
npm install @element-plus/icons-vue

配置volar

Volar是Vue.js开发者的官方推荐插件，旨在解决之前Vetur插件在Vue 3和TypeScript结合使用时出现的问题，如高CPU使用率和对新script setup语法的缺乏支持。
先在vscode插件离搜volar，安装，然后打开在根目录下的 tsconfig.json
通过compilerOptions.type 指定全局组件类型

// tsconfig.json
{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}

接下来配置按需自动导入
安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

打开根目录下的vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 以下三项AutoImport,Components,ElementPlusResolver引入是为配置Element-plus自动按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
        // 以下两项AutoImport,Components是为配置Element-plus自动按需导入
        AutoImport({
          resolvers: [ElementPlusResolver()],
        }),
        Components({
          resolvers: [ElementPlusResolver()],
        }),
  ],
})

打开App.vue
写几个el-button按钮验证一下element-plus是否引入成功

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <div>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

看看效果

很成功，我真是个天才！