暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

GBase 8a Gtester平台相关前端知识(二) —— VUE介绍和创建

原创 Joyful. 2024-04-03
191

GBase 8a MPP Cluster 是大数据时代成熟的分析型MPP数据库。最新 GBase 8a MPP Cluster V9版本的虚拟集群适用于系统的规划建设多套集群,可以实现各个集群业务的独立规划和统一管理,虚拟集群包括数据管理集群、用户管理集群和集群版本管理集群,各个逻辑子集群间可实现透明的数据迁移、数据关联和数据共享。

为了更有效的测试集群功能、更便捷的管理测试机器和执行测试用例,开发了Gtester平台,该平台主要用于测试机器的管理、用例集的管理和执行任务等。本文章主要针对GBase 8a Gtester平台的前端知识点中的VUE介绍和创建进行展开讲解。

VUE介绍

VUE定义

Vue是一套用于构建用户界面的渐进式框架(部分使用,不是全家桶)。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vue是一款简单的MVVM(model-view-viewmodel)框架。

MVVM模型

MVVM 是 Vue实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel,它把每个 HTML 页面都拆分成了这三个部分,如下图所示:
image.png

M:指的是后端传递的数据;
V:指的是所看到的页面;
VM:MVVM模式的核心,它是连接view和model的桥梁。

VUE前提准备及创建

本节以实际使用为例创建一个Vue项目并简单介绍一下框架各部分组成体系,方便后续开发。

Node.js

在终端创建一个Vue项目之前,需要先安装Node.js以使用NPM。NPM 是 Node.js 的包管理器,但是它不会自动安装,需要手动安装。在 Windows 平台上安装 Node.js 的时候,NPM 也会一起被安装。可以登录Node.js的官网(https://nodejs.org/en)自行下载,可以自主选择需要的版本。下载完成后可以通过node -v和npm -v验证是否安装完成,如下图所示:
image.png

VSCode

VSCode(全称:Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能。
可以前往VScode官网(https://code.visualstudio.com/Download)自行下载。下载完成后可以下载中文简体包,如下图所示:
image.png
由于VScode的使用比较简单并且不是本文档重点,所以不多做赘述,对VScode的全面功能感兴趣的可以自主上网查阅相关资料。

VUE创建

1:打开终端输入npm install vue@^2下载Vue。(本文以Vue2举例,具体版本可根据实际情况而定)
2:输入 npm install -g @vue/cli 下载Vue CLI脚手架,Vue CLI是一个命令行工具,可自动化安装和初始化Vue项目。Vue CLI支持各种插件和模板,可定制并快速生成现代化的Vue项目。
3:进入存放Vue项目的目录下输入 vue create 项目名(如:vue create myproject)
选择Vue2进行创建。
image.png
4:当出现Successfully created project myproject时代表该Vue项目已经创建成功。
image.png
5:打开VScode,选择myproject文件夹
image.png
6:VScode中Ctrl+J打开终端输入npm run serve,点击蓝色链接进入web页面。出现如下页面说明该Vue项目已经创建成功。
image.png
image.png

「喜欢这篇文章,您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容,转载时必须标注文章的来源(墨天轮),文章链接,文章作者等基本信息,否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容,欢迎发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论