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

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

安装

# NPM
$ npm install element-plus --save

图片.png

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

图片.png

main.js

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')

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

 

    
      Header
      
        Aside
        Main
      
    
  

LayOut.vue

优化css

LayOut.vue

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

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

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

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

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

完善之后的导航栏

index.js

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