Vben Admin 的介绍以及使用

这篇具有很好参考价值的文章主要介绍了Vben Admin 的介绍以及使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


初识 Vben Admin

Vben Admin官方文档地址 好像官网挂了 !! 嘤嘤嘤嘤嘤

因为最近业务需要,项目使用 vben作为前端框架,开始了解并学习 vben 的使用,发现在网上很少能够找到 vben 相关的教程以及视频,
对于前端方面了解较少,以下内容仅代表个人理解,如有错误,欢迎评论指正

Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案,目标是为开发中大型项目提供开箱即用的解决方案
vben 中包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。

项目会使用的前端技术栈是真的很新了

  • Vue3.0、
  • Vite、
  • Ant-Design-Vue、
  • TypeScript
  • Pinia (和 VueX 是相似的,会了 VueX 后, Pinia 会很好上手)

状态管理使用的是 Pinia ,而不是 VueX,与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的操作,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持。

Vben Admin 可以作为项目的启动模版,快速搭建企业级中后台产品原型。
也可以作为一个示例,用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术,并将其应用在项目中。
Vben Admin 的介绍以及使用


一、安装vue-vben-admin

在官网中找到了项目 git 的位置,官网中对于 vue-vben-admin 的介绍比较简略

Vben Admin 的介绍以及使用
首先需要保证安装了 Node.js ,Yarn1.x, Git 详细的安装可以找别的资料啦(我这里还安装了 pnpm)
在这里发现,运行项目的时候 发现这里用 pnpm run dev yarn run dev yarn dev 都是可以运行的

vue-vbend-admin 使用的是vite ,vite 的特点就是第一次加载的时候比较慢,会把全部的包都加载到里面,热更新的时候相对会快很多

二、vben admin 目录介绍

├── build # 打包脚本相关
│   ├── config # 配置文件
│   ├── generate # 生成器
│   ├── script # 脚本
│   └── vite # vite配置
├── mock # mock文件夹,假的信息接口
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件(管理的是后台中使用的 API ,放在这里管理更规范)
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件(现有 vben 对 AntDesign 组件的二次封装,包括框架层面使用的菜单...)
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量(一般用不到)
│   ├── hooks # hook (组件层面,某些位置方便的使用框架中的某些功能,这里封装后并暴漏的出来)
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layouts # 布局文件(整个框架中的页面布局控制)
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   └── page # 页面布局
│   ├── locales # 多语言
│   ├── logics # 逻辑
│   ├── main.ts # 主入口
│   ├── router # 路由配置(路由分两个部分,路由/菜单 必须要有路由,菜单才会生效,如果有菜单,没有路由,菜单是不会显示的)
│   ├── settings # 项目配置
│   │   ├── componentSetting.ts # 组件配置(组件封装的默认数据)
│   │   ├── designSetting.ts # 样式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多语言配置
│   │   ├── projectSetting.ts # 项目配置
│   │   └── siteSetting.ts # 站点配置
│   ├── store # 数据仓库(数据存储)
│   ├── utils # 工具类
│   └── views # 页面(视图层,组件,页面都在这里面)
├── test # 测试(单元测试相关的)
│   └── server # 测试用到的服务
│       ├── api # 测试服务器
│       ├── upload # 测试上传服务器
│       └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件


1.运行项目

好用的插件

我在这里是使用的 vscode 作为开发工具,安装了官网推荐的插件,以下摘自官网

工具配置

如果您使用的 IDE 是vscode(推荐)的话,可以安装以下工具来提高开发效率及代码格式化

Iconify IntelliSense - Iconify 图标插件
windicss IntelliSense - windicss 提示插件
I18n-ally - i18n 插件
Vetur - vue 开发必备 (也可以选择 Volar)
ESLint - 脚本代码检查
Prettier - 代码格式化
Stylelint - css 格式化
DotENV - .env 文件 高亮

在这里遇到了一个问题,打开官网的示例代码尝试看一下代码调用的时候,希望可以点击打开定义所在文件对应的定义位置,vscode 跳不过去,可能是我没有安装合适的插件,或者是有一些特殊的配置什么的,在此处记录一下,以后找到合适的会在这里补充说明

已在CSDN 中发布问答: vscode 如何点击函数或路径跳转对应定义位置

启动项目

打开终端

可以在 vscode 当中打开命令行窗口,快捷键 Ctrl+Shift+` (ESC下方的按钮)
Vben Admin 的介绍以及使用


输入 yarn run dev 回车运行
Vben Admin 的介绍以及使用如上图所示,启动成功就可以打开了,在浏览器窗口中粘贴地址或者直接在 vscode 在地址上方 Crtl 并点击就可以直接在浏览器中打开了
Vben Admin 的介绍以及使用Vben Admin 的介绍以及使用


三 项目分析

在这里 顺序肯定会比较无厘头, 按照我自己的个人理解,以及根据我可以 get 到的程度,来对这个框架进行使用(复制粘贴大法开始)

1. 路由

项目路由配置存放于 src/router/routes 下面。 src/router/routes/modules用于存放路由模块,在该目录下的文件会自动注册。

说明 : 在 src/router/routes/modules 内的 .ts 文件会被视为一个路由模块。

配置

在 src/router/routes/modules 内的 .ts 文件会被视为一个路由模块。
一个路由模块包含以下结构

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

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

const dashboard: AppRouteModule = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: '/dashboard/analysis',
  meta: {
    icon: 'ion:grid-outline',
    title: t('routes.dashboard.dashboard'),
  },
  children: [
    {
      path: 'analysis',
      name: 'Analysis',
      component: () => import('/@/views/dashboard/analysis/index.vue'),
      meta: {
        affix: true,
        title: t('routes.dashboard.analysis'),
      },
    },
    {
      path: 'workbench',
      name: 'Workbench',
      component: () => import('/@/views/dashboard/workbench/index.vue'),
      meta: {
        title: t('routes.dashboard.workbench'),
      },
    },
  ],
};
export default dashboard;

新增路由

官方示例
如何新增一个路由模块

在 src/router/routes/modules 内新增一个模块文件。

示例,新增 test.ts 文件,此时路由已添加完成,不需要手动引入,放在src/router/routes/modules 内的文件会自动被加载。

// test.ts
import type { AppRouteModule } from '/@/router/types';
import { LAYOUT } from '/@/router/constant';
import { t } from '/@/hooks/web/useI18n';

const dashboard: AppRouteModule = {
  path: '/about',
  name: 'About',
  component: LAYOUT,
  redirect: '/about/index',
  meta: {
    icon: 'simple-icons:about-dot-me',
    title: t('routes.dashboard.about'),
  },
  children: [
    {
      path: 'index',
      name: 'AboutPage',
      component: () => import('/@/views/sys/about/index.vue'),
      meta: {
        title: t('routes.dashboard.about'),
        icon: 'simple-icons:about-dot-me',
      },
    },
  ],
};

export default dashboard;

验证

访问 ip:端口/about/index 出现对应组件内容即代表成功

自己测试新增路由遇到了问题,新增后的路由往别的页面跳转的时候页面空白

四 : vben admin 的使用

vben-admin 学习使用记录,下图中的内容,点我 ~~!!!
Vben Admin 的介绍以及使用

over ~ 晚安文章来源地址https://www.toymoban.com/news/detail-405688.html

到了这里,关于Vben Admin 的介绍以及使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • yudao-ui-admin-vben管理后台:基于最新vben 框架的企业级管理后台应用解决方案

    摘要: 本文主要介绍了yudao-ui-admin-vben管理后台,一个基于最新vben 框架的企业级管理后台应用解决方案。文章首先概述了yudao-ui-admin-vben管理后台的技术栈和功能特点,然后深入探讨了其架构设计、核心模块实现以及性能优化等方面的技术细节。最后,文章总结了yudao-ui-admi

    2024年04月27日
    浏览(33)
  • 详细介绍 Yolov5 转 ONNX模型 + 使用ONNX Runtime 的 Python 部署(包含官方文档的介绍)

    对ONNX的介绍强烈建议看,本文做了很多参考:模型部署入门教程(一):模型部署简介 模型部署入门教程(三):PyTorch 转 ONNX 详解 以及Pytorch的官方介绍:(OPTIONAL) EXPORTING A MODEL FROM PYTORCH TO ONNX AND RUNNING IT USING ONNX RUNTIME C++的部署:详细介绍 Yolov5 转 ONNX模型 + 使用 ONNX Runti

    2024年02月01日
    浏览(47)
  • H2数据库配置及相关使用方式一站式介绍(极为详细并整理官方文档)

    注意:可以直接移步至【2. H2数据库实战】目录下进行对H2数据库的快速使用 1.1 H2数据库介绍 官方文档地址: http://www.h2database.com/html/main.html H2的开发始于2004年5月, 但它在2005年12月14日首次发表。 H2的原作者Thomas Mueller也是Hypersonic SQL的原始开发者。 2001年,他加入PointBase公司

    2024年02月13日
    浏览(43)
  • vben-admin中渲染table表格时怎么处理不同的数据结构

    最近在用vben admin开发后台管理系统,vben admin这个后管端框架封装的非常细,颗粒度非常细,如果了解里面的组件或者api用法,那开发起来非常快。如果不了解,那就非常痛苦了,目前关于vben admin这块的开发问题的博客很少,所以有的问题很难查到。我经历了这样的过程,于

    2024年02月09日
    浏览(42)
  • 初识RabbitMQ(RMQ的五种消息模型介绍以及使用演示)

    RabbitMQ官方提供了5个不同的Demo示例,对应了不同的消息模型: 简单队列 Work模式 广播模式 路由模式 主题模式 其实我比较喜欢将他们分成三类: 1.简单队列:一个生产者,一个消费者。(名师指导,1V1) 2.Work模式:一个生产者,多个消费者。但是一条消息只能够给到一个人

    2023年04月08日
    浏览(41)
  • vue-vben-admin 与.net core 结合实例 【自学与教学 小白教程】---第4节---部门管理

     ue-vben-admin 与.net core 结合实例 这里计划使用.net core 作为后端 。目标:打造好看 易用 开箱即用 的netcore一体化框架。Vue Vben Admin For NetCore 取命 hcrain-vvadmin 我不是前端人员 但有时开发还是要写一些界面。 之前使用layui是时候 狠心升级下了。 只为了好看----------于是  小白教

    2024年01月16日
    浏览(36)
  • web server apache tomcat11-01-官方文档入门介绍

    整理这个官方翻译的系列,原因是网上大部分的 tomcat 版本比较旧,此版本为 v11 最新的版本。 同时也为从零手写实现 tomcat 提供一些基础和特性的思路。 minicat 别称【嗅虎】心有猛虎,轻嗅蔷薇。 web server apache tomcat11-01-官方文档入门介绍 web server apache tomcat11-02-setup 启动 we

    2024年04月16日
    浏览(60)
  • 前端常用的一些插件、UI框架、js库,样式库以及官方文档。【持续更新】

    1.1 文档地址 API文档 1.2 安装教程 1.下载安装 2.导入 2.1 文档地址 API文档 2.2 安装教程 1.下载安装 2.导入 3.1 文档地址 API文档 3.2 安装教程 1.下载安装 2.导入 3.安装遇到的问题 1)描述 ① 控制台报错 ② 终端报错 输出的内容都是 \\\"export xxx was not found in \\\'vue\\\' 2)解决 ① 先卸载 ya

    2024年02月03日
    浏览(41)
  • 【初识Linux】:背景介绍以及环境搭建

    朋友们、伙计们,我们又见面了,本期来给大家解读一下有关Linux的基础知识点,如果看完之后对你有一定的启发,那么请留下你的三连,祝大家心想事成! C 语 言 专 栏: C语言:从入门到精通 数据结构专栏: 数据结构 个  人  主  页 : stackY、 目录 1. Linux背景介绍    

    2024年02月06日
    浏览(33)
  • 初识JDBC——JDBC介绍、安装以及简单运用

    Java 数据库连接技术 (Java DataBase Connectivity) ,能实现 Java 程序对各种数据库的访问 由一组使用 Java 语言编写的类和接口 (JDBC API) 组成,它们位于 java.sql 以及 javax.sql 中         不必为不同的数据库专门编写不同的程序,而只需要加载不同的数据库驱动即可。 Class.forName (

    2024年02月06日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包