vue3用element-plus编写后台管理页面

Vue 3 是一款流行的 JavaScript 框架，它可以帮助你快速构建 web 应用程序和用户界面。而 Element Plus 是一款基于 Vue 3 的 UI 组件库，为开发者提供了丰富的组件和样式，可以帮助你快速创建漂亮的后台管理界面。

以下是使用 Vue 3 和 Element Plus 创建后台管理页面的基本步骤：

1. 创建一个 Vue 3 项目

使用 Vue CLI 工具创建一个新的 Vue 3 项目。在终端中输入以下命令：

vue create my-app

这将创建一个名为 my-app 的新项目，其中包含 Vue 3 的基本配置。

2. 安装 Element Plus

在项目目录中安装 Element Plus。在终端中输入以下命令：

npm install element-plus --save

这将安装 Element Plus 组件库和其它依赖项。

3. 引入 Element Plus

在 main.js 文件中引入 Element Plus：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

这将在应用程序中注册 Element Plus 组件库。

4. 创建后台管理页面

在 src 目录中创建一个新的 views 目录，用于存放后台管理页面的组件。在 views 目录中创建一个新的 Home.vue 组件，用于显示后台管理的主页。在 Home.vue 组件中添加一些 Element Plus 组件，如：

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>后台管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="12">
        <el-card>
          <p slot="header">用户统计</p>
          <div>...</div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <p slot="header">订单统计</p>
          <div>...</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

这将创建一个包含面包屑导航、两个卡片和一些占位符文本的后台管理页面。

5. 创建路由

在 src 目录中创建一个新的 router 目录，用于存放应用程序的路由。在 router 目录中创建一个新的 index.js 文件，并添加路由配置，如下所示：

import { createRouter, createWebHistory } from 'vue-router'

import Home from '@/views/Home.vue'

const routes = [
  { path: '/', component: Home }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

这将创建一个基本的路由配置，其中包括一个指向 Home.vue 组件的路径。

6. 在应用程序中使用路由

在 main.js 文件中引入路由，并在应用程序中使用它：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(ElementPlus)
app.use(router)

app.mount('#app')

现在你已经可以访问后台管理页面了！在浏览器中输入 http://localhost:8080/，你应该可以看到一个包含面包屑导航、两个卡片和一些占位符文本的页面。

这只是一个简单的示例，你可以根据自己的需求添加更多的组件和功能。同时，Element Plus 提供了丰富的组件和样式，可以帮助你快速创建美观的后台管理界面。