侧边栏导航 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

文章链接

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: