位置: IT常识 - 正文

Vben Admin 的介绍以及使用(vb enabled)

编辑:rootadmin
Vben Admin 的介绍以及使用 Vben Admin 的介绍以及使用初识 Vben Admin一、安装vue-vben-admin二、vben admin 目录介绍1.运行项目好用的插件启动项目打开终端三 项目分析1. 路由配置新增路由四 : vben admin 的使用初识 Vben Admin

推荐整理分享Vben Admin 的介绍以及使用(vb enabled),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vben-admin教程,vb enabled,vue vben admin,vben-admin,vben-admin,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、TypeScriptPinia (和 VueX 是相似的,会了 VueX 后, Pinia 会很好上手)

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

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

一、安装vue-vben-admin

在官网中找到了项目 git 的位置,官网中对于 vue-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 文件 高亮Vben Admin 的介绍以及使用(vb enabled)

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

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

启动项目打开终端

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

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

三 项目分析

在这里 顺序肯定会比较无厘头, 按照我自己的个人理解,以及根据我可以 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.tsimport 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 学习使用记录,下图中的内容,点我 ~~!!!

over ~ 晚安

本文链接地址:https://www.jiuchutong.com/zhishi/284039.html 转载请保留说明!

上一篇:简述YOLOv8与YOLOv5的区别(yolov3与yolov2)

下一篇:2013年版世界销量TOP16手机(世界十大销量书)

  • QQ群推广,怎样让几亿QQ用户关注您(怎么把qq群推广出去)

    QQ群推广,怎样让几亿QQ用户关注您(怎么把qq群推广出去)

  • 电商网站推广应注重的网站形象(电商网站推广应注意事项)

    电商网站推广应注重的网站形象(电商网站推广应注意事项)

  • qq空间回复别人评论怎么发表情包(qq空间回复别人评论其他人能看到吗)

    qq空间回复别人评论怎么发表情包(qq空间回复别人评论其他人能看到吗)

  • 当前网络请求过于频繁(当前网络请求过于频繁是什么意思)

    当前网络请求过于频繁(当前网络请求过于频繁是什么意思)

  • mate30 5g和4g区别(mate30 5g与mate30 4g)

    mate30 5g和4g区别(mate30 5g与mate30 4g)

  • 苹果11照片怎么编辑文字(苹果11照片怎么加密)

    苹果11照片怎么编辑文字(苹果11照片怎么加密)

  • 小米手环查询激活日期(小米手环激活时间怎么查)

    小米手环查询激活日期(小米手环激活时间怎么查)

  • 路由器对网速影响大吗(路由器网速影响因素)

    路由器对网速影响大吗(路由器网速影响因素)

  • 钉钉退出企业别人有提示吗(钉钉然后退出企业)

    钉钉退出企业别人有提示吗(钉钉然后退出企业)

  • 钉钉视频会议开摄像头分屏会被发现吗(钉钉视频会议开不了摄像头)

    钉钉视频会议开摄像头分屏会被发现吗(钉钉视频会议开不了摄像头)

  • 手机桌面快捷方式有什么用(手机桌面快捷方式什么意思)

    手机桌面快捷方式有什么用(手机桌面快捷方式什么意思)

  • 华为mate30pro小圆点怎么设置(华为mate30pro小圆圈怎么设置)

    华为mate30pro小圆点怎么设置(华为mate30pro小圆圈怎么设置)

  • 华为手机怎么解除密码(华为手机怎么解开密码)

    华为手机怎么解除密码(华为手机怎么解开密码)

  • word文档编辑受限怎么解除(word文档编辑受限如何改动)

    word文档编辑受限怎么解除(word文档编辑受限如何改动)

  • 淘宝里的旺旺号在哪里(淘宝旺旺app下载)

    淘宝里的旺旺号在哪里(淘宝旺旺app下载)

  • 6sp耳机模式怎么取消(6sp耳机模式怎么关闭)

    6sp耳机模式怎么取消(6sp耳机模式怎么关闭)

  • 抖音里关注可以隐藏吗(抖音里关注可以取关吗)

    抖音里关注可以隐藏吗(抖音里关注可以取关吗)

  • icloud储存的照片怎么看(icloud储存的照片怎么下载到手机)

    icloud储存的照片怎么看(icloud储存的照片怎么下载到手机)

  • word批量调整图片尺寸(word批量调整图片大小)

    word批量调整图片尺寸(word批量调整图片大小)

  • 如何关闭相互宝分摊(如何关闭相互宝入口)

    如何关闭相互宝分摊(如何关闭相互宝入口)

  • steam兑换码怎么用(steam兑换码怎么用手机版)

    steam兑换码怎么用(steam兑换码怎么用手机版)

  • 电脑怎么打标点符号(电脑怎么打标点符号怎么打出来)

    电脑怎么打标点符号(电脑怎么打标点符号怎么打出来)

  • 怎样解除搜索记录隐藏(如何解除搜索锁定)

    怎样解除搜索记录隐藏(如何解除搜索锁定)

  • 优活手环怎么开机(优活手环怎么开通Nfc)

    优活手环怎么开机(优活手环怎么开通Nfc)

  • p30如何关机(p30手机如何关机)

    p30如何关机(p30手机如何关机)

  • 母公司给子公司注资需要什么手续
  • 工资绩效被扣除怎么办
  • 怎么在电子税务局添加银行账户
  • 小规模纳税人报税前需要做什么
  • 增值税16点税降到13点,补缴税款怎么算
  • 企业会计准则和新会计准则的区别
  • 转让不动产增值税计算
  • 财产租赁合同印花税计税依据含税吗
  • 管家婆进货单科目名称怎么录入?
  • 企业买电动车做资产如何做折旧?
  • 个人合伙企业有没有企业所得税
  • 支付给职工和为职工支付的现金
  • 会计职业道德的作用
  • 地税没报税怎么办
  • 小微企业季度超过45万如何填申报表
  • 年薪制离职补偿金
  • 所得税报表怎么申报
  • 收到厂房租金要交税吗
  • 发票认证只认证进项吗
  • 城镇土地使用税每年都要交吗
  • 受托方委托加工费会计分录
  • 驱动备份和还原工具软件有哪些
  • 研发支出怎么做账
  • 一次性计提折旧的政策
  • 工业企业生产成本核算表
  • PHP:oci_lob_copy()的用法_Oracle函数
  • 查补以前年度企业所得税的申报处理
  • windows7电脑时间不对
  • 病假工资是工资吗
  • 设备经营租赁属于什么行业
  • imagestring php
  • php二维数组按某个键值排序
  • 预付采购材料款60000元
  • wordpress页面设置
  • 研发支出属于什么类科目
  • 税控盘技术维护费计入什么科目
  • java同步操作
  • 地税代开的发票怎么计提税款?
  • 公司捐赠给个人公司要交税吗
  • 商业会计与财务会计的相同
  • 在计算应纳税所得额时,纳税人因自然灾害
  • 环保税的算法
  • mysql连接数据库的基本步骤是什么
  • 建筑公司预收工程款
  • 企业营业执照的颁发部门是
  • 交易性金融资产的入账价值
  • 预提费用没有收到发票也没有付款
  • 借别人账户过钱
  • 加盟代理需要什么手续
  • 未交增值税科目怎么用
  • 事业单位的股东是谁
  • 招待客人的住宿叫什么
  • 增发股票会计科目
  • 公司员工还款会计分录
  • 专票取消认证
  • 来料加工企业的辅助材料自购怎开销售发票
  • 资产减值损失包含
  • mysql %d
  • centos7怎么配置yum源
  • mysql+php
  • win8.1怎么设置自动关机
  • win7或win8、win8.1系统下安装ubuntu实现双系统图文教程
  • fsc文件用什么软件打开
  • win7资源管理器怎么打开
  • win10mobile最新版本
  • linux命令的含义
  • cocos2dx游戏开发进阶卷这本书怎么样
  • 使用jquery
  • python怎么打印完整的信息
  • perl中的$_
  • 简要说明javascript的作用
  • javascript运行速度
  • js获取设备
  • 欧美 房产税
  • 报税时一直显示申报中
  • 大连税务稽查局魏禾简历
  • 企业交社保可以退税吗
  • 福建省狱警招聘医生
  • 浅谈企业所得税论文
  • 河北电子税务局怎么使用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设