使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架

以下是一个使用Vue 3、Vite、TypeScript和Element Plus创建的简单项目脚手架的示例：

首先，确保你已经安装了Node.js。

1. 使用Vue CLI创建项目：

npm init vue@latest

2. 在创建过程中，选择Vue 3、TypeScript和使用Vite。
3. 安装Element Plus：

npm install element-plus --save

4. 在vite.config.ts中配置Element Plus的按需导入（需要安装unplugin-vue-components和unplugin-auto-import）：

npm install unplugin-vue-components unplugin-auto-import --save-dev

vite.config.ts:

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

5. 在main.ts中全局导入Element Plus：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

6. 在App.vue中使用Element Plus组件：

<template>
  <el-button @click="handleClick">Click Me</el-button>
</template>
 
<script setup lang="ts">
const handleClick = () => {
  alert('Button clicked!')
}
</script>
 
<style>
/* 可以在这里添加全局样式 */
</style>

这样，你就拥有了一个基础的Vue 3项目，并且集成了Element Plus，可以开始开发你的应用了。