公司后台管理系统搭建（Vue3+Vite+Element Plus+TypeScript+Pinia）

以下是使用Vue 3、Vite、Element Plus、TypeScript和Pinia搭建后台管理系统的基本步骤和示例代码：

1. 创建项目：

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

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

cd my-vue-app
npm install

3. 安装Element Plus和Pinia：

npm install element-plus pinia

4. 配置Vite配置文件（vite.config.ts），加入Element Plus配置：

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'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 配置Element Plus的按需引入
  optimizeDeps: {
    include: ['element-plus/es/components'],
  },
})

5. 创建Pinia store（src/stores/main.ts）：

import { defineStore } from 'pinia'
 
export const useMainStore = defineStore({
  id: 'main',
  state: () => {
    return { counter: 0 }
  },
  actions: {
    increment() {
      this.counter++
    },
  },
})

6. 在main.ts中安装Pinia并引入Element Plus样式：

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

7. 在src/App.vue中使用Element Plus组件和Pinia：

<template>
  <el-button @click="increment">{{ counter }}</el-button>
</template>
 
<script setup lang="ts">
import { useMainStore } from './stores/main'
 
const { counter, increment } = useMainStore()
</script>

以上代码提供了一个基本框架，展示了如何集成Vue 3、Vite、Element Plus、TypeScript和Pinia来创建一个具有状态管理和UI组件的后台管理系统。