网站的整体规划怎么写,广告文案优秀网站,网站页面和图片设计,景德镇网站制作公司文章目录 概述一、先看效果1.1 静态效果1.2 动态效果 二、核心思路三、全量代码3.1 文件目录结构3.2 /sidebar/index.vue 中3.3 /sidebar/sidebarItem.vue 中3.4 路由表结构 四、代码讲解五、SVG组件六、系列文章友链1、[配置husky、stylelint、commitlint#xff0c;实现git提… 文章目录 概述一、先看效果1.1 静态效果1.2 动态效果 二、核心思路三、全量代码3.1 文件目录结构3.2 /sidebar/index.vue 中3.3 /sidebar/sidebarItem.vue 中3.4 路由表结构 四、代码讲解五、SVG组件六、系列文章友链1、[配置husky、stylelint、commitlint实现git提交前代码校验](http://t.csdn.cn/226Xn)2、[配置路径别名实现代替/src](http://t.csdn.cn/mMEwO)3、[配置 vue-router路由跳转并完成路由模块化](http://t.csdn.cn/4r1ht)4、[配置vue-i18n中英文切换完成国际化](http://t.csdn.cn/xyOaV)5、[配置滚动条样式](http://t.csdn.cn/cUkdA)6、[项目引入Element-plus并配置按需自动导入](http://t.csdn.cn/mxdsS)7、[配置页面切换路由跳转过渡动画](http://t.csdn.cn/LEKk6)8、[配置nprogress实现路由加载进度条](http://t.csdn.cn/inFOa) 概述 做什么封装通用左侧菜单栏组件 怎么做使用 Element-Plus 组件库中的 el-menu组件进行二次封装 技术栈Vue3 Ts Vite且采用 setup 语法糖写法 准备工作请各位自行引入Element-plus组件库本文中有用到 svg组件svg组件封装教程请看第五点 一、先看效果
1.1 静态效果 1.2 动态效果 二、核心思路 查看 Element-plus 组件库中的 el-menu 组件不难发现菜单栏大致可以分为两类一类是有子菜单的一类是无子菜单的。 所以我们将对这两类进行分情况设计再结合递归即可完成根据路由列表动态渲染菜单栏 三、全量代码
3.1 文件目录结构 3.2 /sidebar/index.vue 中
script langts setup
// sidebarItem 项组件
import SideBarItem from ./sidebarItem.vue;
import { useRouter } from vue-router;
// 拿到路由列表过滤我们不想要的
const router useRouter();
const routerList router.getRoutes().filter((v) v.meta v.meta.isShow);
/script
templatediv classsidebar!-- 项目名称及logo --div classsidebar-logo flex-centersvg-icon icon-classlogo /spanVitalityAdmin/span/div!-- 导航菜单 --el-menuactive-text-color#fffbackground-color#001529:default-active$route.pathtext-color#999:unique-openedtruerouter!-- 引入子组件 --SideBarItem :routerListrouterList //el-menu!-- active-text-color当前菜单项被选中时字体的颜色 --!-- background-color这个menu菜单的背景色 --!-- default-active 当前激活菜单的 index --!-- text-color菜单项字体颜色 --!-- unique-openedunique-opened 是否只保持一个子菜单的展开 --!-- router是否使用 vue-router 的模式启用该模式会在激活导航时以 index 作为 path 进行路由跳转 --/div
/template
style langscss scoped
.sidebar {height: 100%;.sidebar-logo {height: 48px;background-color: #002140;color: #fff;font-weight: 700;line-height: 48px;text-align: center;font-size: 20px;}.el-menu {height: calc(100% - 48px);border-right: 0;overflow: auto;}
}
/style
3.3 /sidebar/sidebarItem.vue 中
script setup langts
import { RouteRecordRaw } from vue-router;
// 做类型限制解决ts类型报错
type CustomRouteRecordRaw RouteRecordRaw {meta: {isShow?: boolean;};
};
const props defineProps({// 拿到父组件传递过来的路由列表进行渲染routerList: {type: Array as () CustomRouteRecordRaw[],required: true}
});
/script
templatetemplate v-foritem in props.routerList :keyitem.path!-- 当该菜单项有子菜单时 --el-sub-menu :indexitem.path v-ifitem.children item.children.length 0template #title v-ifitem.meta.icon!-- 菜单项图标我此处用的是全局封装的 svg组件 --el-iconsvg-icon :icon-classitem.meta.icon //el-icon!-- 菜单项名称在路由中定义好 --span{{ item.meta.title }}/span/template!-- 若路由中未定义菜单项icon则仅展示名称--我的仅一级菜单有图标 --template #title v-else{{ item.meta.title }}/template!-- 递归遍历-自己调用自己核心代码 --sidebarItem :routerList( item.children as CustomRouteRecordRaw[]) //el-sub-menu!-- 当前菜单项无子菜单 --el-menu-item :indexitem.path v-else!-- 与上面注释大致相同不多做额外注释 --template v-ifitem.meta.iconel-iconsvg-icon :icon-classitem.meta.icon //el-iconspan{{ item.meta.title }}/span/templatetemplate v-else{{ item.meta.title }}/template/el-menu-item/template
/templatestyle scoped langscss
.is-active {background: #409eff;font-weight: 700;
}.el-menu-item {:hover {color: #fff;font-weight: 700;}
}.el-menu--collapse {.el-menu-item {justify-content: center;}
}// 下列代码是用于兼容horizontal所写酌情删或留
.el-menu--horizontal {.el-menu-item.is-active {background-color: transparent !important;border-bottom: 2px solid #409eff !important;.el-icon,span {color: #409eff !important;}}.el-sub-menu.is-active {.el-sub-menu__title {border: 0 !important;}.el-icon,span {color: #409eff !important;}}
}
/style
3.4 路由表结构 isShow: true, // 控制当前项是否在菜单栏中渲染出来比如你写了 login 页面的路由但是并不希望 login在menu菜单中渲染出来即可设为false title: ‘首页’, // menu菜单项的名称没啥好说的 icon: ‘menu-home’ // menu菜单项的图标我此处是与封装好的 svg 组件结合使用的 export default [{path: /layout,name: layoutIndex,component: () import(/layout/index.vue),children: [{path: /home,name: homeIndex,component: () import(/views/home/index.vue),meta: {isShow: true, // 控制当前项是否在菜单栏中渲染出来比如你写了 login 页面的路由但是并不希望 login在menu菜单中渲染出来即可设为falsetitle: 首页, // menu菜单项的名称没啥好说的icon: menu-home // menu菜单项的图标我此处是与封装好的 svg 组件结合使用的}},{path: /echarts,name: echartIndex,// component: () import(/views/echarts/index.vue),meta: {isShow: true,title: Echarts页,icon: menu-echarts},children: [{path: /echarts/barCharts,name: barCharts,component: () import(/views/echarts/barCharts.vue),meta: {title: 柱状图}},{path: /echarts/pieCharts,name: pieCharts,component: () import(/views/echarts/pieCharts.vue),meta: {title: 饼图}}]},{path: /package,name: packageIndex,component: () import(/views/package/index.vue),meta: {isShow: true,title: 组件,icon: menu-package}},{path: /menu,name: menuIndex,redirect: /menu/menu-1,meta: {isShow: true,title: 一级菜单,icon: menu-package},children: [{path: /menu/menu-1,name: menu-1,component: () import(/views/menu/menu1.vue),meta: {title: 二级菜单-1}},{path: /menu/menu-2,name: menu-2,component: () import(/views/menu/menu2.vue),meta: {title: 二级菜单-2},children: [{path: /menu/menu-2/children,name: menu3,component: () import(/views/menu/menu3.vue),meta: {title: 三级菜单}}]}]}]}
]; 四、代码讲解 五、SVG组件 本文不展开讲解 svg组件 的封装与使用有需要的朋友欢迎参考下面的 svg组件 封装教程 svg组件封装教程http://t.csdn.cn/uYsSJ
六、系列文章友链 本系列文章记录了从零到一 搭建 Vue3TsVite 项目的全过程 包括但不限于项目配置、组件封装、过渡动画等 系列文章持续更新中~~有任何问题欢迎评论区留言 最后希望本文都能对你有一点帮助点赞收藏不迷路 1、配置husky、stylelint、commitlint实现git提交前代码校验
2、配置路径别名实现代替/src
3、配置 vue-router路由跳转并完成路由模块化
4、配置vue-i18n中英文切换完成国际化
5、配置滚动条样式
6、项目引入Element-plus并配置按需自动导入
7、配置页面切换路由跳转过渡动画
8、配置nprogress实现路由加载进度条
