侧边栏导航 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')
开始使用组件里面的布局 后台管理的布局 直接复制代码即可
LayOut.vue
>
export default {
name: "layout",
setup() {},
};
优化css
LayOut.vue
商铺后台管理系统
>
export default {
name: "layout",
setup() {},
};
.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;
}
app.vue里面写一个全局的flex布局
#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;
}
到这里 后台管理系统 的框架初具模型 继续编写代码
继续编写左侧的导航菜单 文档里面都是有代码可以直接拿过来使用的
根据menu菜单 的属性 进行一些代码的优化
设置router 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。
完善之后的导航栏
商铺后台管理系统
账号管理
角色管理
export default {
name: "layout",
setup() {},
};
.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;
}
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
文章链接
大家都在找:
vue.js:vue.js教程
javascript:javascript官网下载教程
elementui:elementui下载
前端:前端web开发
ecmascript:ecmascript和javascript的区别
发表评论