Vue3.0商店后台管理系统项目实战-vue3搭配Element Plus框架使用

2022-10-28 15:11:08 浏览数 (1)

侧边栏导航 vue3搭配Element Plus框架使用 Element Plus基于 Vue 3，面向设计师和开发者的组件库 文档：https://element-plus.gitee.io/zh-CN/

安装

代码语言：javascript复制
# NPM
$ npm install element-plus --save

图片.png

安装完成之后开始引入 打开main.js的文件 这里接口文档上是有说明的 ，直接根据文档上的教程来写

图片.png

main.js

代码语言：javascript复制
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

开始使用组件里面的布局 后台管理的布局 直接复制代码即可

代码语言：javascript复制
 <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>

LayOut.vue

代码语言：javascript复制
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">
            <router-link to="/index">角色列表</router-link>
            <router-link to="/user">用户列表</router-link></el-aside
          >
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  setup() {},
};
</script>

优化css

LayOut.vue

代码语言：javascript复制
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header  class="common-header   flex-float">
            <div  class="flex">
            <img  class="logo" src="../../assets/logo.png"  alt="">
            <h1  class="title">商铺后台管理系统</h1>
            </div>

            <el-button type="danger">退出</el-button>

        </el-header>
        <el-container>
          <el-aside  class="common-aside " width="200px">
            <router-link to="/index">角色列表</router-link>
            <router-link to="/user">用户列表</router-link></el-aside
          >
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  setup() {},
};
</script>
<style >
.el-container {
  height: 100vh;
  overflow: hidden;
}
.common-header {
    background: rgb(63 67 72);
}

.common-aside {
  background: rgb(48, 55, 65);
}
.logo{
    width:60px;
}
.title{
color: #fff;
}
</style>

app.vue里面写一个全局的flex布局

代码语言：javascript复制
<template>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

/* flex布局 */
.flex-float {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex {
  display: flex;
  align-items: center;
}
</style>

到这里 后台管理系统 的框架初具模型 继续编写代码

继续编写左侧的导航菜单 文档里面都是有代码可以直接拿过来使用的

根据menu菜单 的属性 进行一些代码的优化

设置router 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。

完善之后的导航栏

代码语言：javascript复制
<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header class="common-header flex-float">
          <div class="flex">
            <img class="logo" src="../../assets/logo.png" alt="" />
            <h1 class="title">商铺后台管理系统</h1>
          </div>

          <el-button type="danger">退出</el-button>
        </el-header>
        <el-container>
          <el-aside class="common-aside" width="200px">
            <el-menu background-color="none" text-color="#fff" :router="true">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>账号管理</span>
                </template>

                <el-menu-item-group>
                  <el-menu-item index="/user">用户列表</el-menu-item>
                  <!-- <el-menu-item index="1-2">item two</el-menu-item> -->
                </el-menu-item-group>
              </el-sub-menu>

              <el-sub-menu index="2">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>角色管理</span>
                </template>

                <el-menu-item-group>
                  <el-menu-item index="/role">角色列表</el-menu-item>
                  <!-- <el-menu-item index="1-2">item two</el-menu-item> -->
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-aside>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  setup() {},
};
</script>
<style >
.el-container {
  height: 100vh;
  overflow: hidden;
}
.common-header {
  background: rgb(63 67 72);
}

.common-aside {
  background: rgb(48, 55, 65);
}
.logo {
  width: 60px;
}
.title {
  color: #fff;
}
</style>

index.js

代码语言：javascript复制
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'layOut',
   // redirect: "/index",//重定向 进来就自动默认到index路径
    component: () => import('../views/LayOut/LayOut.vue'),

    //嵌套路由/子路由
    children: [
      {
        path: "/role",
        name: "role",
        component: () => import('../views/pages/roleList.vue'),
      }, {
        path: "/user",
        name: "user",
        component: () => import('../views/pages/userList.vue'),
      }
    ]
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',

    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
vue.js javascript 网站

0 人点赞