vue3 element plus admin

### 使用 Vue 3 和 Element Plus 构建管理后台

#### 项目初始化与依赖安装

要创建基于 Vue 3 和 Element Plus 的管理后台，首先需设置开发环境并引入必要的库。对于新项目的启动，推荐利用 Vite 或 Webpack 等现代工具链加速构建过程。

npm init vite@latest my-element-plus-app --template vue
cd my-element-plus-app
npm install element-plus sass

接着，在 `main.js` 中注册 Element Plus：

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);
app.use(ElementPlus);
app.mount('#app');

此部分展示了如何将 Element Plus 集成到 Vue 应用程序中[^4]。

#### 设计页面布局

按照常见的管理系统设计模式，通常会有一个固定的头部导航栏、侧边菜单以及主要内容区域。这些可以通过自定义组件实现，如 `Header.vue`, `Sidebar.vue` 及 `Content.vue`.

- **Header.vue**

<template>
  <el-header style="text-align: right; font-size: 12px">
    <!-- 头部内容 -->
  </el-header>
</template>

<script setup lang="ts"></script>

- **Sidebar.vue**

<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
    <el-submenu index="1">
      <template #title><i class="el-icon-location"></i>Navigator One</template>
      <el-menu-item-group title="Group One">
        <el-menu-item index="1-1">Item One</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script setup lang="ts">
function handleOpen(key, keyPath) {
  console.log(key, keyPath);
}
function handleClose(key, keyPath) {
  console.log(key, keyPath);
}
</script>

- **Content.vue**

<template>
  <el-main>Main content goes here...</el-main>
</template>

<script setup lang="ts"></script>

上述代码片段提供了基本的模板结构用于搭建管理后台的不同模块[^3]。

#### 路由配置

为了让不同视图之间能够平滑切换，还需要合理规划路由规则。编辑 `router.js` 文件如下所示：

import { createRouter, createWebHistory } from 'vue-router';
import Dashboard from '../views/Dashboard.vue';
import Users from '../views/Users.vue';
import Settings from '../views/Settings.vue';

const routes = [
  { path: '/', redirect: '/dashboard' },
  { path: '/dashboard', component: Dashboard },
  { path: '/users', component: Users },
  { path: '/settings', component: Settings }
];

export default createRouter({
  history: createWebHistory(),
  routes,
});

这一步骤确保了各个功能页面可以被正确加载和显示。

#### 主题定制化

考虑到用户体验的一致性和美观度，建议根据实际需求调整样式主题。可通过修改 SCSS 文件中的变量来自定义颜色方案和其他视觉属性。

// variables.scss
$--color-primary: #409eff;

最后，记得在全局范围内导入这个文件以便生效。

---