这是由于开启了路由切换动画,且对应的页面组件存在多个根节点导致的，在页面最外层添加<div></div>即可错误示例<template> <!-- 注释也算一个节点 --> <h1>text h1</h1> <h2>text h2</h2></template>正确示例<template> <div> <h1>text h1</h1>
菜单必须和路由匹配才会显示在界面上，所以得确保菜单和对应的路由存在即可显示.由于 vite 在本地没有转换代码，且代码中用到了可选链等比较新的语法。所以本地开发需要使用版本较高的浏览器(Chrome 85+)进行开发
如果将 build.minify 设置为 'esbuild'，且不能启用 LEGACY，否则打包将会报错，两者选其一即可打包。 控制台看到以下警告的原因是 ant-design-vue 会检测是否使用了 babel-plugin-import 来判断是否进行了组件库的按需引入。但是项目使用的是 vite 的插件 vite-plugin-style-
当修改 .env 等环境文件及 vite.config.ts 文件时，vite 会自动重启服务。自动重启有几率出现问题，请重新运行项目即可解决.
vben-admin 的项目配置默认是缓存在 localStorage 内，所以版本更新后可能有些配置没改变。解决方式是每次更新代码的时候修改 package.json 内的 version 版本号. 因为 localStorage 的 key 是根据版本号来的。所以更新后版本不同前面的配置会失效。重新登录即可VUE_VBEN_ADMIN__DEV
介绍项目已经内置了黑暗主题切换，只需配置自己需要的颜色变量，即可在项目中使用#原理通过 vite-plugin-theme 插件，将所有的颜色变量抽取到独立的 css 文件，并且全部在 html 上面加上 css 选择器。通过改变 html 标签的 data-theme 属性来进行黑暗主题切换#配置黑暗主题颜色配置通过 vi
介绍使用 lint 的好处具备基本工程素养的同学都会注重编码规范，而代码风格检查（Code Linting，简称 Lint）是保障代码规范一致性的重要手段。遵循相应的代码规范有以下好处 较少 bug 错误率 高效的开发效率 更高的可读性项目内集成了以下几种代码校验方式 eslint 用于校验代码格式规范 co
如果你使用的 vscode 开发工具，则推荐安装 I18n-ally 这个插件#I18n-ally 插件安装了该插件后，你的代码内可以实时看到对应的语言内容#配置默认语言在 src/settings/localeSetting.ts 内可以配置默认语言export const LOCALE: { [key: string]: LocaleType } = { ZH_CN: 'zh_CN&
项目中有以下多种图标使用方式。#组件库图标使用 ant-design-vue 提供的图标<template> <StarOutlined /> <StarFilled /> <StarTwoTone twoToneColor="#eb2f96" /></template><script> import { defineComponent } from 'vue'; impo
产生原因跨域产生的原因是由于前端地址与后台接口不是同源，从而导致 ajax 不能发送非同源产生的问题 Cookie、LocalStorage 和 IndexDB 无法获取 DOM 无法获得 AJAX 请求不能发送同源条件协议，端口，主机 三者相同即为同源反之，其中只要 某一个 不一样则为不同源#解决方式本地开发跨域本
URL 模式这种模式会先启动 vite 服务，Electron 使用 Url 地址来进行渲染#使用#从 GitHub 获取代码Electron 代码在 electron-main 分支# clone electron-main分支代码git clone -b electron-main https://github.com/vbenjs/vue-vben-admin vben-admin-electron#安装依赖yarn提示首
构建&部署前言由于是展示项目，所以打包后相对较大，如果项目中没有用到的插件，可以删除对应的文件或者路由，不引用即可，没有引用就不会打包。当然，你也可以使用精简版 vue-vben-admin-thin 进行开发。#构建项目开发完成之后，执行以下命令进行构建yarn build构建打包成功之后，会在根目录生成
除了自带组件以外，有时我们还需要引入其他外部模块。我们以 ant-design-vue 为例：#安装安装 ant-design-vue# 在终端输入下面的命令完成安装yarn add ant-design-vue#使用#全局使用import { createApp } from 'vue';import App from './App.vue';import Antd from &#
介绍主要介绍如何在项目中使用和规划样式文件。默认使用 less 作为预处理语言，建议在使用前或者遇到疑问时学习一下 Less 的相关特性（如果想获取基础的 CSS 知识或查阅属性，请参考 MDN 文档）。项目中使用的通用样式，都存放于 src/design/ 下面。.├── ant # ant design 一些样式覆盖├
按需引入项目目前的组件注册机制是按需注册，是在需要用到的页面才引入。<template> <Menu> <SubMenu></SubMenu> <Menu> <menu> <sub-menu></sub-menu> <menu></template><script>import { Menu } from 'ant-design-vue&a
开发环境如果前端应用和后端接口服务器没有运行在同一个主机上，你需要在开发环境下将接口请求代理到接口服务器。如果是同一个主机，可以直接请求具体的接口地址。#配置开发环境时候，接口地址在项目根目录下.env.development 文件配置# vite 本地跨域代理VITE_PROXY=[["/basic-api","ht
项目中集成了三种权限处理方式： 通过用户角色来过滤菜单(前端方式控制)，菜单和路由分开配置 通过用户角色来过滤菜单(前端方式控制)，菜单由路由配置自动生成 通过后台来动态生成路由表(后台方式控制)#前端角色权限实现原理: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初
项目菜单配置存放于 src/router/menus 下面提示菜单必须和路由匹配才能显示#菜单项类型export interface Menu { // 菜单名 name: string; // 菜单图标,如果没有，则会尝试使用route.meta.icon icon?: string; // 菜单图片,如果同时传递了icon和img,则只会显示img img?: strin
项目路由配置存放于 src/router/routes 下面。 src/router/routes/modules用于存放路由模块，在该目录下的文件会自动注册。#配置#模块说明在 src/router/routes/modules 内的 .ts 文件会被视为一个路由模块。一个路由模块包含以下结构import type { AppRouteModule } from '/@/r
用于修改项目的配色、布局、缓存、多语言、组件默认配置#环境变量配置项目的环境变量配置位于项目根目录下的 .env、.env.development、.env.production具体可以参考 Vite 文档.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽
