vue3+vite+ts+vueRouter+vuex+axios+element-plus搭建项目框架

以下是一个使用Vue 3、Vite、TypeScript、Vue Router、Vuex和Axios，并集成了Element Plus的项目基础目录和配置示例：

|-- public/                      # 静态资源目录
|-- src/
|   |-- api/                     # API请求
|   |   |-- index.ts             # API索引文件
|   |   |-- someApi.ts           # 具体API请求
|   |-- assets/                  # 资源文件
|   |   |-- styles/              # CSS样式
|   |-- components/              # 通用组件
|   |   |-- SomeComponent.vue    # 一个Vue组件
|   |-- constants/                # 常量
|   |   |-- index.ts             # 常量索引文件
|   |-- directives/              # 自定义指令
|   |   |-- index.ts             # 自定义指令索引文件
|   |   |-- someDirective.ts     # 自定义指令
|   |-- layouts/                 # 页面布局
|   |   |-- index.vue            # 默认布局
|   |-- router/                  # Vue Router
|   |   |-- index.ts             # Vue Router索引文件
|   |   |-- routes.ts            # 路由配置
|   |-- store/                   # Vuex Store
|   |   |-- index.ts             # Vuex Store索引文件
|   |   |-- modules/             # Vuex模块
|   |-- utils/                   # 工具函数
|   |   |-- index.ts             # 工具函数索引文件
|   |-- views/                   # 页面组件
|   |   |-- SomePage.vue         # 一个页面组件
|   |-- App.vue                  # 根组件
|   |-- main.ts                  # 入口文件
|   |-- shims-vue.d.ts           # Vue类型定义
|   |-- vite-env.d.ts            # 环境变量类型定义
|-- tests/                       # 单元测试
|-- .env                         # 环境变量配置
|-- .eslintrc.js                 # ESLint配置
|-- .gitignore                   # Git忽略文件
|-- index.html                   # HTML模板
|-- LICENSE                      # 许可证
|-- package.json                 # 包配置
|-- README.md                    # 项目说明
|-- tsconfig.json                # TypeScript配置
|-- vite.config.ts               # Vite配置

在vite.config.ts中配置Element Plus：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@element-plus/icons/styles/index.scss" as *;`,
      },
    },
  },
})

在main.ts中集成Element Plus：