Vue3 结合 Element Plus 和 Vue Router 的完整安装配置及使用详解

以下是 Vue3 结合 Element Plus 和 Vue Router 的完整安装配置及使用详解：

---

一、安装依赖

# 安装 Vue3、Vue Router 和 Element Plus
npm install vue@next vue-router@4 element-plus

---

二、Element Plus 配置

1. 引入 Element Plus 及主题（可选）

<!-- main.js -->
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'; // 引入默认主题
// 可选：引入主题变量覆盖（如自定义颜色）
import 'virtual:windi.css'; // 如果使用 Windi CSS

2. 注册 Element Plus

const app = createApp(App);
app.use(ElementPlus);
app.use(router);
app.mount('#app');

---

三、Vue Router 配置

1. 创建路由文件（src/router/index.js）

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

// 定义路由对象
const routes = [
  {
    path: '/', // 路径
    name: 'Home', // 唯一名称
    component: Home, // 对应组件
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 history 模式
  routes,
});

export default router;

2. 在组件中使用路由

<!-- App.vue -->
<template>
  <el-container>
    <!-- 路由导航 -->
    <el-menu mode="horizontal">
      <router-link to="/" class="el-menu-item">首页</router-link>
      <router-link to="/about" class="el-menu-item">关于</router-link>
    </el-menu>

    <!-- 路由出口 -->
    <el-main>
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <keep-alive> <!-- 可选：缓存组件 -->
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </el-main>
  </el-container>
</template>

<style>
.el-menu-item {
  color: var(--el-color-primary);
}
</style>

---

四、完整示例代码结构

1. 项目目录

src/
├── assets/
├── components/
├── router/
│   └── index.js       # 路由配置
├── views/
│   ├── Home.vue
│   └── About.vue
├── App.vue
└── main.js

2. 组件示例（Home.vue）

<template>
  <el-card>
    <h1>首页</h1>
    <el-button type="primary" @click="$router.push('/about')">跳转到关于</el-button>
  </el-card>
</template>

---

五、关键配置总结表

配置项	说明	代码示例
安装依赖	安装 Vue3、Vue Router 和 Element Plus	npm install vue@next vue-router@4 element-plus
Element 引入	在 main.js 中注册 Element Plus 并引入样式	app.use(ElementPlus); import 'element-plus/dist/index.css';
路由定义	在 router/index.js 中定义路径和组件映射	const routes = [{ path: '/', component: Home }];
路由导航	使用 <router-link> 替代原生 <a> 标签	<router-link to="/">首页</router-link>
路由出口	<router-view> 渲染匹配到的组件	<router-view />
动态路由参数	使用 :id 等动态参数，通过 useRoute() 获取	{ path: '/user/:id', component: User }, // 获取：const route = useRoute(); route.params.id

---

六、常见问题

1. 路由跳转无效

   • 确保 router-view 存在于父组件中。
   • 检查路由路径是否拼写错误（如 /about 和 /About 不同）。

2. Element Plus 样式丢失

   • 确认已引入 element-plus/dist/index.css。
   • 如果使用 CSS 预处理器（如 SASS），需通过 @import "~element-plus/packages/theme-chalk/src/index.scss"; 引入。

3. TypeScript 报错

   • 安装类型定义：npm install @types/element-plus --save-dev。

---

七、扩展功能

1. 路由守卫（全局前置守卫）

// router/index.js
router.beforeEach((to, from, next) => {
  console.log('进入路由:', to.name);
  next();
});

2. 嵌套路由（以 About 为例）

const routes = [
  {
    path: '/about',
    component: About,
    children: [ // 嵌套子路由
      {
        path: 'team',
        component: Team,
      },
    ],
  },
];

通过以上步骤，即可完成 Vue3 + Element Plus + Vue Router 的基础配置与使用。如需进一步优化（如路由懒加载、权限控制等），可补充说明具体需求。