【测试开发】知识点-前端 vue-element-admin 框架,项目组件分析

简介: 【测试开发】知识点-前端 vue-element-admin 框架,项目组件分析

在实战中学习,在学习中成长。


测试平台到现在开发了几个功能了,前后端也陆续写了些代码,觉得应该回顾一下,梳理一些知识点。


比如前端在用的vue-element-admin框架,以及后端持久化层在用的 mybatis 等等,现在可以只懂皮毛,但是不能一直这样。


为了后面更得心应手的使用,接下来准备先整理一下关于这个前端框架的知识点。


一、组件


开始还是要了解一下组件:


  • 组件(Component)是 Vue.js 最强大的功能之一。
  • 组件可以扩展 HTML 元素,封装可重用的代码。
  • 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。


1268169-20211107203421737-1034389245.png


说个贴合实际点的:就是在页面中看到的内容,都是由组件构成的


1268169-20211107203655424-1961478231.png


就拿登录页来说,本身就是个登录页组件。而其中,还包含了表单组件。在表单组件里又包含了文本框组件。文本框里还包含了图标组件。。。


换句话来说,在vue js 当中,组件就可以理解为页面当中的某一块元素


最上面的组件示意图我加工一下,大概就是这样子:


1268169-20211107204433464-267818651.png


但是组件的细节就不整理了,网上系统的教程多得是,遇到对应的知识点去快速学习使用即可,现在的目的是了解在用的前端项目。


二、vue-element-admin 项目组件


在项目中,有几个重要的部分需要关注:


  • 入口 html 文件:public/index.html
  • 入口 js 脚本:src/main.js
  • 路由:src/router/index.js
  • 顶层组件:src/App.vue


1. public/index.html


目前项目当中虽然已经有了几个页面,但实际上,整个项目只有 1 个 html 文件。通过其他 js 文件的配合,会把具体需要的 vue 文件加载到这个 html中显示。


1268169-20211107210648564-1203843196.png


上图就是在项目中的代码文件了,这时候鼠标右击浏览器的登录页面,点击【查看网页源代码】,可以看到运行后的代码效果。


1268169-20211107211531782-1687171667.png


注意,在这个 html 中,有一个<div id="app">,生成的文件都会自动注入到这里。


1268169-20211107211615530-1386572023.png


在程序运行起来之后,会动态的生成一些脚本,生成后就会注入到这里了,可以看下网页源码里这个位置:


1268169-20211107211902048-1588184095.png


然后上面是登录页的,现在我点击登录进去,查看【项目管理】的网页源代码,依然是这个内容:


1268169-20211107212048344-1181167490.png


这也就是上面说的整个项目只有这 1 个 html 文件入口了,至于其他的页面内容,就是通过脚本动态的渲染出来的。


2. src/main.js


这个就是能渲染丰富页面的 js 脚本了,生成出来就是网页源码里看到的src="/static/js/app.js"。因为目前是本地开发环境,没有去打包,所以都是临时生成的。


如果打包后就可以看到本地项目有了新的目录dist,这里可以找到生成的app.js文件。


1268169-20211107224027278-742850961.png


继续来看maim.js


1268169-20211107224237090-1769650157.png


这里面是没写业务逻辑的,可以看到有很多的 import ,主要引入了一些核心的功能模块。作用就相当于后端代码里,引入相关<dependency>,就可以使用对应的功能。

简单看一下:


import Vue from 'vue'  // 用 vue 肯定要引入
import 'normalize.css/normalize.css' // 一个现代化的东西来替代css重置
import ElementUI from 'element-ui' // 用到 element-ui
import 'element-ui/lib/theme-chalk/index.css'  // element-ui的一些主题样式
import locale from 'element-ui/lib/locale/lang/en' // element-ui 国际化
import '@/styles/index.scss' // 框架本身给自己定义的一些全局样式  
import App from './App'   // 引入根组件
import store from './store'  // 叫状态管理,这里可以简单理解为一个存放前端数据的地方
import router from './router'  // 路由模块
import '@/icons' // 扩展图标模块
import '@/permission' // 框架提供的前端角色权限控制模块


继续往下看,这块是跟前端使用 mock 接口有关的,我实际中没有使用,直接调用后端的真实接口,可以忽略。


/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}


再往下到了 element-UI相关的,虽然最上面引入了 vue 和 ElementUI,但是为了方便的将 2 者融合使用,这里把ElementUI挂载到了Vue中。


// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui,按如下方式声明
// Vue.use(ElementUI)


在最后,创建了一个 vue 对象:


new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})


之前在单学习 vue 的时候,写demo的时候都需要在 html 里 new 一个 vue 对象。


但是在使用框架的过程中,在各种页面vue组件里并没有再去创建,比如看接口定义的页面:


1268169-20211107230740145-695676401.png


并没有去 new vue,但是并不是不需要了,只是这个事情在main.js里做了。


在创建的过程中,指定了渲染的对象是el: '#app',# 是代表 id,id=app的元素,其实就是public/index.html中的<div id="app"></div>


1268169-20211107231045205-217521720.png


接着就会给这个 vue 对象挂载路由router,也就是上面导入进来的模块,也就是之前做开发的时候需要改造的一个地方。


1268169-20211107231516675-833521718.png


可以继续滑到router/index.js最底部:


1268169-20211107231559098-896502008.png


看到最终创建了router并且导出。


回到main.js,看最后的render: h => h(App)。这里的render是渲染引擎。


作用是渲染页面当中要展示的内容,也就是要展示组件。展示哪个组件?就是App,也就是上面导入来的根组件。


最终所有的组件都会显示到index.html中的<div id="app"></div>下。


3. src/router/index.js


路由就是上面提到的地方,在实际开发过程中,这里也是需要我们针对自己的项目进行改造的地方。


1268169-20211108122114847-1148917042.png


4. src/App.vue


顶层组件,也就是上面提到的根组件。


1268169-20211108122649677-2044633944.png


这里有个<router-view />,实际上就是路由出口,用来显示模板内容,这些模板就是src/views下的文件来定义的。


1268169-20211108123208287-115943099.png


比如上图中所示的我们开发中自己定义的组件内容,都会在路由出口这里展示。

那么一个path如何能展示对应的模板,肯定得有映射关系,就是定义在路由模块里的内容。


1268169-20211108123511909-285022617.png


以这个登录为例,当输入的路由等于/login,就会去找/views/login/index模板,最后 /views/login/index.vue就会显示在路由出口。


如果 chrome装了vue.js devtools插件,在登录页面按F12 可以看到组件嵌套详细:


1268169-20211108124043679-512457787.png


三、Layout 组件


除了上述几部分内容,还有一个与页面息息相关,就是 Layout 组件。在路由js文件里就已经出现过了。


1268169-20211108221533996-248898805.png


在路由里也是导入进来使用的,实际位置就是src/layout/index.vue


/* Layout */
import Layout from '@/layout'


1268169-20211108221838613-1202288927.png


1. 布局组件里的内容


打开src/layout/index.vue,看看里面都有什么。


1268169-20211108222216496-882251716.png


首先标记出来的有 3 个内容:


  • sidebar:侧边栏
  • navbar:导航栏
  • app-main:主内容区


对应到页面其实就是这样的:


1268169-20211108222359320-1342789247.png


继续往下看。


1268169-20211108222555057-1981075329.png


./components中导入了3个子组件,然后注册子组件。


1268169-20211108222723010-954010789.png


子组件注册好之后就可以在页面中调用了,也就是在上面刚介绍过的地方。


1268169-20211108223015145-159792861.png


这里框架里是可以不区分大小写的,AppMain小写不加驼峰就写成了app-main


所以现在来看到话,App.vue下面嵌套着LayoutLayout下面又嵌套着上面这3样。


1268169-20211108223400701-334935054.png


移动鼠标在不同组件上可以看到页面对应部分会高亮。


1268169-20211108223640989-275710793.gif


从外,我们的其他path也都有这个 layout,当我们的页面内容想能够展示在这个布局里,就使用这个Layout组件就好。


1268169-20211108223920151-1145626270.png


2. 嵌套到Appmain主区域里显示


path下的子节点的组件会嵌到 Layout 下的 Appmain组件里展示。


1268169-20211108224408988-1586818000.png


继续打开 Appmain 探索一番。


1268169-20211108224604330-838758542.png


看到里面嵌套了一个router-view路由出口,而在顶层的App.vue里也是有一个的。


1268169-20211108224853745-1252425761.png


那么现在就是:


  • App.vue 里有个路由出口
  • APP.vue 嵌套了 layout,layout里面又有这个 AppMain
  • AppMain 里也有一个 路由出口


而且AppMain所在的位置,就是页面的主内容区域。所以,AppMain 里的路由出口就是子路由出口了。而子路由出口就对应的子路由。


所以在路由模块里,children下面的就是子路由了。


1268169-20211108225501770-1316228455.png


那么现在/interfaceTest/apiManagement,这个路由对应的组件就是@/views/apiManagement/moduleTreeTable,会显示到主内容区域。


所以,当我们点击不同的子路由的时候,在主内容区域就可以看到不同的页面组件了。


1268169-20211108225934713-249359515.gif


到这里就是对于 vue-element-admin 前端框架的简单分析,帮助理解我们写的前端代码到底是怎么运作最终呈现出来。

相关文章
|
6天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
2天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
11 1
|
2天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
11 2
|
2天前
|
JavaScript 测试技术 API
Jest进阶:测试 Vue 组件
Jest进阶:测试 Vue 组件
|
3天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
17 2
|
3天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
12 2
|
5天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
9天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
16 7
|
5天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
9天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
19 6