Vue-Element-Admin使用

本篇为Vue-element-admin开源框架的使用,用于使用该框架的一些方法和注意点

Vue-admin深入理解报告

Vue-admin深入理解报告

布局解析

vue-admin布局主要依赖三大块,Layout、app-main、router-view

Layout

image-20240124161539458

vue-element-admin 中大部分页面都是基于这个 layout 的,除了个别页面如:login , 404, 401 等页面没有使用该layout。如果你想在一个项目中有多种不同的layout也是很方便的,只要在一级路由那里选择不同的layout组件就行。

app-main

位置于/layout/components/AppMain

这里在 app-main 外部包了一层 keep-alive 主要是为了缓存 <router-view> 的,配合页面的 tabs-view 标签导航使用

其中transition 定义了页面之间切换动画,可以根据自己的需求,自行修改转场动画。相关文档。默认提供了fadefade-transform两个转场动画,具体 css 实现见transition.scss。如果需要调整可在AppMain.vue中调整transitionname

router-view

不同的路由使用统一个component在业务中十分常见,默认情况下,我们切换两个页面并不能触发页面内相同组件的created 或者 mounted 钩子,但我们可以在router-view 上加上一个唯一的 key,来保证路由切换时都会重新渲染触发钩子了。

页面创建和路由和各项参数理解

  • 新增页面方式为在@/router/index.js下添加新的路由:

    其中需要注意,如果children下的路由数为1则不会显示下拉框image-20240124144149922反之则会显示

  • 除了上诉提到的路由的各项参数,还存在其他参数可供选择:

    其中activeMenu意思是路由到该路径下后,在导航栏高亮指定的路由地址

  • 创建多级路由(如三级路由),需要在上一级的根文件下添加一个<router-view>

路由

路由分为两种:

  1. constantRoutes: 代表那些不需要动态判断权限的路由,如登录页、404、等通用页面。

  2. asyncRoutes: 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。

侧边导航栏默认展开

可以通过default-openeds来进行设置,首先找到侧边栏代码vue-element-admin/src/layout/components/Sidebar/index.vue

注意 :default-openeds="['/example','/nested']" 里面填写的是 submenu 的 route-path

新增页面注意项

  • 在新增页面中,我们需要注意几个文件全局和私有设置

    1. view:创建完路由后,我们需要在views下创建新的view,并在其文件夹下创建由该view私有的utilscomponents,同时公有components存放在全局components文件夹下

    2. api:在apis下创建对应的接口文件夹,用于维护接口

    3. 样式:在引入css的时候,考虑到全局css,每一个页面的样式就写在当前 views下面,请记住加上scoped 或者命名空间,避免造成全局的样式污染。

      scoped 表示该css私有,只会作用于此组件以及其子组件下

样式

样式上存在两个问题:

  1. 全局污染 —— CSS 文件中的选择器是全局生效的,不同文件中的同名选择器,根据 build 后生成文件中的先后顺序,后面的样式会将前面的覆盖;

  2. 选择器复杂 —— 为了避免上面的问题,我们在编写样式的时候不得不小心翼翼,类名里会带上限制范围的标示,变得越来越长,多人开发时还很容易导致命名风格混乱,一个元素上使用的选择器个数也可能越来越多,最终导致难以维护。

因此vue提供了scoped解决这个问题,它给css加了一个域的概念,只要加上 <style scoped> 这样 css 就只会作用在当前组件内了。

使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

自定义 element-ui 样式

现在我们来说说怎么覆盖 element-ui 样式。由于 element-ui 的样式我们是在全局引入的,所以你想在某个页面里面覆盖它的样式就不能加 scoped,但你又想只覆盖这个页面的 element 样式,你就可在它的父级加一个 class,用命名空间来解决问题。

也可以使用深度作用选择器:

当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 >>> 来实现:

服务器交互

vue-admin的请求流程为:

  1. UI进行操作

  2. 调用api目录下的请求参数

  3. 使用分装的request.js来发送请求

  4. 获取服务端返回

@/utils/request.js 是基于 axios 的封装,便于统一处理 POST,GET 等请求参数,请求头,以及错误提示信息等。具体可以参看 request.js。 它封装了全局 request拦截器response拦截器统一的错误处理统一做了超时处理baseURL设置等

设置多个baseURL

首先我们需要明白,vue-admin的请求地址由两部分组成url = baseURL + requestURL

baseURL一般在request.js内定义,一般为api的根目录(如果不写入完整地址,则会默认使用当前运行地址)

requestURL为api接口方法下定义,一般为具体的api的具体地址

我们可以通过环境变量设置多个baseURL,从而请求不同的 api 地址。

之后根据环境变量创建axios实例,让它具有不同的baseURL

也可以在api方法下直接通过覆盖方式使用

快捷导航(标签栏导航)

即页面面包屑下方的tag导航栏:

image-20240124160804796

这方面比较复杂,而且用处不大,就不深究了。明白如何移除就行:

首先找到 @/layout/components/AppMain.vue 然后移除 keep-alive

然后移除整个 @/layout/components/TagsView.vue 文件,并在@/layout/components/index@/layout/Layout.vue 移除相应的依赖。最后把 @/store/modules/tagsView 相关的代码删除即可。