vue3+ts+vite自适应项目——路由、layout布局

在Vue3+TypeScript+Vite项目中，使用vue-router进行路由管理，结合Element Plus实现自适应的layout布局，可以参考以下代码示例：

1. 安装依赖：

npm install vue-router @element-plus/icons

2. router/index.ts：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // ...其他路由
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

3. layout布局组件AppLayout.vue：

<template>
  <el-container class="app-layout">
    <!-- 头部 -->
    <el-header>
      <!-- 导航菜单、搜索框等 -->
    </el-header>
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <!-- 侧边栏内容 -->
    </el-aside>
    <!-- 主体内容 -->
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>
 
<script setup lang="ts">
// 这里可以编写布局逻辑
</script>
 
<style scoped>
.app-layout {
  height: 100%; /* 使用100%高度以适应屏幕高度 */
}
</style>

4. main.ts：

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

5. App.vue：

<template>
  <app-layout />
</template>
 
<script setup>
import AppLayout from './layout/AppLayout.vue'
</script>

这个简单的示例展示了如何在Vue3+TypeScript+Vite项目中集成vue-router和Element Plus的layout布局组件。在实际应用中，您需要根据具体需求添加更多的路由、导航菜单项、侧边栏内容和主体组件。