学习vue-vben-admin遇到的问题（一）

这几天在公司接触了一个后台框架 vue-vben-admin 打开得时候，感觉页面和效果的做的不错。就想这看看是怎么做的。

折腾了两天才渐渐有点感觉，开始第一次接触还是点蒙，怎么做的官网地址是Vben Admin

官网运行命令

git clone https://github.com/vbenjs/vue-vben-admin-doc# 安装依赖
yarn# 运行项目
yarn dev

不出意外，就能正常运行的跑起来

左侧菜单如何增加的问题。

在 src/router/routes/modules 增加一个 .ts 文件会被视为一个路由模块，相应也得也会在左侧生成一个菜单有很多注意的地方，要不然很容易出现404 或者加载错误的问题。

测试增加一个路由模块代码如下

import type { AppRouteModule } from '/@/router/types';

import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';

const test: AppRouteModule = {
path: '/test', 这个是父级菜单路径
name: 'Test22', 父级菜单名称其名称不可重复
component: LAYOUT,
redirect: '/test/test', 链接跳转地址需要在children里面path 一个地址，cheldren不存在会报错
meta: {
icon: 'simple-icons:about-dot-me', 菜单的图标
title: t('测试路由'), //菜单的名字
orderNo: 100000, //菜单的排列序号
},
children: [ //父级菜单的子菜单
{
path: 'test', //子菜单路径前面不需要加/
name: 'test', //子菜单名称不可重复
component: () => import('/@/views/test/test1/test.vue'), //加载视图文件注意这个文件需要放在

一个文件夹呢，不能有其他vue视图文件否则报错，找不到问题，例如菜单2是test2文件，菜单是1test1文件夹需要分开放
meta: {
title: t('测试'), //子菜单名称
},
},
{
path: 'test2',
name: 'test2',
component: () => import('/@/views/test/test2/test2.vue'),
meta: {
title: t('测试2'),
},
},
],
};

export default test;

学习vue-vben-admin遇到的问题（一）相关推荐

Vue vben admin - 新鲜出炉的高颜值管理后台UI框架，基于 Vue3 和 Ant Design Vue
基于Vue3.0 / Vite / Ant Design 等火热开源项目构建,新鲜出炉,值得关注. 关于 Vue vben admin Vue Vben Admin 是一个基于 Vue3.0.Vite ...
eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
Vben Admin
//项目结构 . ├── build # 打包脚本相关 │ ├── config # 配置文件 │ ├── generate # 生成器 │ ├── script # 脚本 │ └── vite # ...
【Vben Admin】
Vben Admin 初体验环境准备安装依赖 yarn 安装全局安装yarn 验证目录说明菜单新增菜单菜单排序接口请求 axios配置打包环境准备本地环境需要安装 Yarn1.x ...
Vben Admin 二(登录页)
深入 Vben Admin 登录部分 1.运行使用指令 yarn serve 执行 Local: http://localhost:3100/ 此时的路径为http://localhost:3100 ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
学习Vue的一些看法
对于vuejs的学习我大概分三个层次: 第一层:了解概念,理解原理,不求甚解即可. 大到nodejs/webpack,搞清楚作用,运作流程:小到vuex/vue-router作用,预期目标.搞清楚这些 ...
vue 回车查询按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...
tomcat如何部署.net程序_.NET 程序员如何学习Vue
之所以取这个标题,是因为本文来自内部培训的整理,培训的对象是公司的 .NET 程序员,.NET 程序员学习 Vue 是为了在项目中做二次开发时能够更好地跟产品对接. Vue 是现在比较流行的前端框架, ...
vue源码学习--vue源码学习入门
本文为开始学习vue源码的思路整理.在拿到vue项目源码的之后看到那些项目中的文件夹,会很困惑,不知道每个文件夹内的世界,怎么变换,怎样的魔力,最后产生了vue框架.学习源码也无从学起.我解决了这些困 ...

学习vue-vben-admin遇到的问题（一）

学习vue-vben-admin遇到的问题（一）相关推荐

最新文章

热门文章