vue3系统项目架构搭建（vite+vue3+ts+pinia+vueuse+elPlus）；结合网上指导以及自身构建后采坑的心得，可闭眼入

以下是一个使用Vue 3、Vite、TypeScript、Pinia、VueUse和Element Plus的项目基础结构的示例：

1. 使用命令行工具创建一个新的Vue 3项目，使用Vite作为构建工具：

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

2. 进入项目目录并安装必要的依赖：

cd my-vue3-app
npm install

3. 安装Pinia作为状态管理库：

npm install pinia

4. 安装VueUse，它提供了很多实用的Composition API函数：

npm install @vueuse/core

5. 安装Element Plus，它是基于Element UI的Vue 3版本：

npm install element-plus --save

6. 在src目录下创建一个store文件夹，并添加index.ts来设置Pinia：

// src/store/index.ts
import { createPinia } from 'pinia'
 
const store = createPinia()
 
export default store

7. 在main.ts中安装Pinia：

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

8. 在vite.config.ts中配置Element Plus和VueUse的组件自动按需引入（需要安装unplugin-vue-components和unplugin-auto-import）：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  plugins: [
    vue(),
    components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

9. 最后，安装必要的开发依赖：

npm install @vitejs/plugin-vue unplugin-vue-components unplugin-auto-import -D

这样就完成了一个基础的Vue 3项目架构设置，包含了Vite的快速热重载、TypeScript的类型检查、Pinia的状态管理、VueUse的实用函数库以及Element Plus的UI组件库。