以下是使用 Vue 3 + Composition API + Vite + Pinia + Element Plus 构建项目的完整指南，包含 TypeScript 支持配置：

---

1. 创建项目

使用 Vite 初始化项目

npm create vite@latest my-vue-app -- --template vue-ts

如果不需要 TypeScript，使用 --template vue

进入项目目录

cd my-vue-app

---

2. 安装核心依赖

npm install vue-router@4 pinia element-plus @element-plus/icons-vue
npm install -D sass  # 如需使用 Element Plus 的 SCSS 变量

---

3. 项目结构

src/
├─ assets/           # 静态资源
├─ components/       # 公共组件
├─ views/            # 页面组件
├─ router/           # 路由配置
│  └─ index.ts
├─ stores/           # Pinia 状态管理
│  └─ counter.ts
├─ styles/           # 全局样式
│  └─ element.scss   # Element Plus 自定义主题
├─ App.vue
├─ main.ts

---

4. 配置 Element Plus

(1) 按需自动导入 (推荐)

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

(2) 修改 vite.config.ts

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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: [
    vue(),
    AutoImport({
   
      resolvers: [ElementPlusResolver