技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)

简介: 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)

Vue.js 是一套用于构建用户界面的渐进式框架,在目前的前端开放中比较流行的前端框架。

Vue 被设计成自底向上的逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或已有项目整合。但是学习 Vue.js 需要一定的 HTML、CSS、和 JavaScript 基础,所以本章节将不对这些基础内容进行讲解。

Vue的组件化开发

介绍

目前的前端开发中组件化开发成为了潮流,而所谓的组件化开发就是把页面拆分成多个组件,最后将每一个组件进行罗列,形成我们看到的网页。

例如:百度的首页,可以简单的分为以下图中的四个组件

image1080×536 52.8 KB

先将这四块的组件开发完成之后,再将这些组件组装成一个完整的页面。

组件开发的优点

  1. 在维护网页时,不需要在一个大的页面中去修改,而是去对应的组件中去修改数据。
  2. 组件的资源是独立的,可以提高每个模块的重用性。比如上图的搜素框,在首页使用到了,在其他的地方也要用到同样的搜索框,就可以原封不动的将组件拿过来直接用。
  3. 组件之间可以相互嵌套。

环境介绍和准备

编译器

这里选用的是 vscode,其他编译器也可,vscode 下载地址:https://code.visualstudio.com/。

vscode 插件的选择:

  • JavaScript (ES6) code snippets:包含 VSCode 的 ES6 语法中的 JavaScript 代码段。
  • Vetur:VSCode 支持 VUE 的工具,有语法高亮、格式化、错误检查、自动完成等功能。
  • (推荐)Auto Close Tag:自动添加 HTML/XML 结束标签。
  • (推荐)Auto Rename Tag:自动重命名对应的 HTML/XML 标签。
  • Highlight Matching Tag:突出显示匹配的开始和结束标签。

这些只是推荐需要用到的插件,可以根据自己的爱好进行选择,其他的插件也可以。

组件库

随着 Vue 的流行,其他公司也形成了自己独有的组件库,比如 ElementUI、BootstrapVue、Vuetify,这些组件可都是可以拿来直接使用的,这里体现出了 Vue 组件化开发的优势。

这里主要使用的组件库是 vuetify。

比如项目中需要一个按钮时,就可以到对用的组件下面找到它,将代码拿出来即可,里面有各式各样风格的组件:Button component — Vuetify


Vue.js安装

1、通过下载 Vue.js 包

使用 <script> 标签进行引入, Vue 会被注册为全局变量。

<script src="../vuejs/vue.js"></script>

2、在线引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

指定一个明确的版本进行使用

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

这是一个更小的构建,可以带来比开发环境下更快的速度体验,但是在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

npm安装Vue

环境准备:本次使用的 node 和 npm 的版本是

C:\Users\16478>node -v
v12.15.0
C:\Users\16478>npm -v
6.13.4

安装命令

npm install -g @vue/cli
C:\Users\16478>vue --version
@vue/cli 4.5.12

大家先把环境安装好,有的环境后,下一篇我们接着说Vue.js框架的使用哦~

相关文章
|
14天前
|
敏捷开发 Java 测试技术
探索软件测试中的自动化测试框架
在软件开发的生命周期中,软件测试扮演着至关重要的角色。随着技术的不断进步和软件项目的日益复杂化,传统的手动测试方法已经无法满足高效、准确的测试需求。自动化测试作为一种提高测试效率和质量的有效手段,越来越受到开发者和测试者的青睐。本文将深入探讨自动化测试框架的重要性、常见的自动化测试工具以及如何选择合适的自动化测试框架。
38 10
|
9天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
31 1
|
16天前
|
设计模式 前端开发 JavaScript
自动化测试框架设计原则与最佳实践####
本文深入探讨了构建高效、可维护的自动化测试框架的核心原则与策略,旨在为软件测试工程师提供一套系统性的方法指南。通过分析常见误区,结合行业案例,阐述了如何根据项目特性定制自动化策略,优化测试流程,提升测试覆盖率与执行效率。 ####
41 6
|
16天前
|
人工智能 前端开发 测试技术
探索软件测试中的自动化框架选择与优化策略####
本文深入剖析了当前主流的自动化测试框架,通过对比分析各自的优势、局限性及适用场景,为读者提供了一套系统性的选择与优化指南。文章首先概述了自动化测试的重要性及其在软件开发生命周期中的位置,接着逐一探讨了Selenium、Appium、Cypress等热门框架的特点,并通过实际案例展示了如何根据项目需求灵活选用与配置框架,以提升测试效率和质量。最后,文章还分享了若干最佳实践和未来趋势预测,旨在帮助测试工程师更好地应对复杂多变的测试环境。 ####
40 4
|
15天前
|
监控 jenkins 测试技术
自动化测试框架的构建与实践
【10月更文挑战第40天】在软件开发周期中,测试环节扮演着至关重要的角色。本文将引导你了解如何构建一个高效的自动化测试框架,并深入探讨其设计原则、实现方法及维护策略。通过实际代码示例和清晰的步骤说明,我们将一起探索如何确保软件质量,同时提升开发效率。
34 1
|
21天前
|
机器学习/深度学习 前端开发 测试技术
探索软件测试中的自动化测试框架选择与优化策略####
本文深入探讨了在当前软件开发生命周期中,自动化测试框架的选择对于提升测试效率、保障产品质量的重要性。通过分析市场上主流的自动化测试工具,如Selenium、Appium、Jest等,结合具体项目需求,提出了一套系统化的选型与优化策略。文章首先概述了自动化测试的基本原理及其在现代软件开发中的角色变迁,随后详细对比了各主流框架的功能特点、适用场景及优缺点,最后基于实际案例,阐述了如何根据项目特性量身定制自动化测试解决方案,并给出了持续集成/持续部署(CI/CD)环境下的最佳实践建议。 --- ####
|
10天前
|
JavaScript 安全 编译器
TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法
本文深入探讨了 TypeScript 与 Jest 测试框架的结合使用,从 TypeScript 的测试需求出发,介绍了 Jest 的特点及其与 TypeScript 结合的优势,详细讲解了基本测试步骤、常见测试场景及异步操作测试方法,并通过实际案例展示了其在项目中的应用效果,旨在提升代码质量和开发效率。
30 6
|
6天前
|
机器学习/深度学习 人工智能 Java
探索软件测试中的自动化框架选择与优化策略####
本文深入探讨了在软件测试领域,面对众多自动化测试框架时,如何根据项目特性、团队技能及长远规划做出最佳选择,并进一步阐述了优化这些框架以提升测试效率与质量的策略。通过对比分析主流自动化测试框架的优劣,结合具体案例,本文旨在为测试团队提供一套实用的框架选型与优化指南。 ####
|
6天前
|
敏捷开发 前端开发 Java
软件测试中的自动化测试框架选择与实践
在当今软件开发生命周期中,自动化测试已成为提升软件质量和开发效率的关键手段。本文旨在探讨自动化测试框架的选择标准及其在实际项目中的应用实践。通过对主流自动化测试框架的分析比较,结合具体案例,本文将阐述如何根据项目需求和团队特点选择合适的自动化测试工具,并分享实施过程中的经验教训。
16 1
|
9天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
25 2