测试开发之前端VUE框架的搭建与使用(基础篇)
ccwgpt 2024-09-23 04:26 24 浏览 0 评论
今日分享主题：前端框架 Vue 的入门安装步骤
简单介绍下吧，Vue是当下流行的前端框架之一，与 Angular 和 React 并称为三大优秀的前端框架。Vue 可以轻松地结合后端框架开发测试平台或 web 应用。感兴趣的小伙伴可以网上搜索关于 Vue 的详细资料和介绍。
我也正在使用 Python+Vue 框架开发测试管理工具中。今天的内容主要是从 Vue 的入门安装来总结和分享的。
以下所有命令需要以管理员模式执行。本篇文章分享以 Mac 版本为示例。
Windows 进入 cmd 的 doc 窗口前就切换成以管理员身份运行。
Mac 在终端运行命令时，可以直接在命令前加上 sudo 以管理员权限运行。
1、初始化一个名为：element_ui_vue 的项目工程
命令：vue init webpack element_ui_vue
初始化过程的页面信息如上图所示，按照命令行提示一步步执行，作为 vue 的新手，尽量不选择在初始化时默认去安装一些插件，这些插件可以在后面手动安装，有助于理解。
看到上面的界面提示：说明 element_ui_vue 的项目工程初始化成功。
2、安装依赖插件，分别是：vue-router，element-ui，sass-loader，node-sass
(1)、进入初始化项目：element_ui_vue 的目录
命令：cd element_ui_vue
(2)、安装 vue-router
命令：npm install vue-router --save-dev
以安装 vue-router 为例，出现 vue-router@x.x.x 说明插件安装成功，如果有报错可根据提示来解决和修复，以下插件安装同理。
(3)、安装 element-ui
命令：npm i element-ui -S
(4)、安装依赖
命令：npm install
安装依赖时，如果出现如上图中的提示：“run npm audit fix to fix them, or npm audit for details”
解决方法：根据命令提示直接执行命令：npm audit fix 即可修复
(5)、安装 sass 加载器
命令：cnpm install sass-loader node-sass --save-dev
这个 sass 加载器，我使用的是 cnpm 也就是淘宝镜像来安装的，相较于npm的国外镜像来说快很多，如果在使用npm安装失败后，可以换成 cnpm 来安装。
(6)、启动测试
命令：npm run dev
启动成功，去浏览器，输入url：http://localhost:8087，返回页面如下
说明一个名为：element_ui_vue的vue项目启动成功。
(7)、停止服务
命令：Ctrl + Z（适用于Mac版）Ctrl + C（适用于windows版）
再去访问：http://localhost:8087，界面提示如下：
小结：
今天的分享只是初级的 VUE 入门安装知识，后续会继续分享关于如何使用 Python + Flask + VUE 框架来开发个性化测试平台，敬请期待。
相关推荐
- 定时任务工具，《此刻我要...》软件体验
-
之前果核给大家介绍过一款小众但实用的软件——小说规则下载器，可以把网页里的小说章节按照规则下载到本地，非常适合喜欢阅读小说的朋友。有意思的是，软件作者当时看到果核写的体验内容后，给反推荐到他的帖子里去...
- 前端定时任务的神库:Node-cron，让你的项目更高效!
-
在前端开发中，定时任务是一个常见的需求。无论是定时刷新数据、轮询接口，还是发送提醒，都需要一个可靠且灵活的定时任务解决方案。今天，我要向大家介绍一个强大的工具——Node-cron，它不仅能解决定时任...
- Shutter Pro!一款多功能定时执行任务工具
-
这是一款可以在电脑上定时执行多种任务的小工具，使用它可以根据时间，电量等来设定一些定时任务，像定时打开程序、打开文件，定时关机重启，以及定时弹窗提醒等都可以轻松做到。这是个即开即用的小工具，无需安装，...
- 深度解析 Redis 缓存击穿及解决方案
-
在当今互联网大厂的后端开发体系中，Redis缓存占据着极为关键的地位。其凭借高性能、丰富的数据类型以及原子性操作等显著优势，助力众多高并发系统从容应对海量用户的访问冲击，已然成为后端开发从业者不可或...
- 从零搭建体育比分网站完整步骤（比较好的体育比分软件）
-
搭建一个体育比分网站是一个涉及前端、后端、数据源、部署和维护的完整项目。以下是从零开始搭建的详细流程：一、明确项目需求1.功能需求：实时比分展示（如足球、篮球、网球等）支持多个联赛和赛事历史数据查询比...
- 告别复杂命令行:GoCron 图形界面让定时任务触手可及
-
如果你是运维人员或者经常接触一些定时任务的配置，那么你一定希望有一款图形界面来帮助你方便的轻松配置定时任务，而GoCron就是这样一款软件，让你的配置可视化。什么是GoCron从名字你就可以大概猜到，...
- Java任务管理框架核心技术解析与分布式高并发实战指南
-
在当今数字化时代，Java任务管理框架在众多应用场景中发挥着关键作用。随着业务规模的不断扩大，面对分布式高并发的复杂环境，掌握其核心技术并进行实战显得尤为重要。Java任务管理框架的核心技术涵盖多个方...
- 链表和结构体实现:MCU软件定时器（链表在单片机中的应用）
-
在一般的嵌入式产品设计中，介于成本、功耗等，所选型的MCU基本都是资源受限的，而里面的定时器的数量更是有限。在我们软件设计中往往有多种定时需求，例如脉冲输出、按键检测、LCD切屏延时等等，我们不可能...
- SpringBoot定时任务（springboot定时任务每小时执行一次）
-
前言在我们开发中，经常碰到在某个时间点去执行某些操作，而我们不能人为的干预执行，这个时候就需要我们使用定时任务去完成该任务，下面我们来介绍下载springBoot中定时任务实现的方式。定时任务实现方式...
- 定时任务新玩法!systemd timer 完整实战详解
-
原文链接：「链接」Hello，大家好啊！今天给大家带来一篇使用systemdtimer实现定时任务调度的详细实战文章。相比传统的crontab，systemdtimer更加现代化、结构清晰...
- Celery与Django:打造高效DevOps的定时任务与异步处理神器
-
本文详细介绍了Celery这一强大的异步任务队列系统，以及如何在Django框架中应用它来实现定时任务和异步处理，从而提高运维开发（DevOps）的效率和应用性能。下面我们先认识一下Cele...
- 订单超时自动取消的7种方案，我用这种!
-
前言在电商、外卖、票务等系统中，订单超时未支付自动取消是一个常见的需求。这个功能乍一看很简单，甚至很多初学者会觉得："不就是加个定时器么？"但真到了实际工作中，细节的复杂程度往往会超...
- 裸机下多任务框架设计与实现（gd32裸机配置lwip 网络ping不通）
-
在嵌入式系统中，特别是在没有操作系统支持的裸机环境下，实现多任务执行是一个常见的挑战。本文将详细介绍一种基于定时器的多任务框架设计，通过全局时钟和状态机机制，实现任务的非阻塞调度，确保任务执行中不会出...
- 亿级高性能通知系统构建，小白也能拿来即用
-
作者介绍赵培龙，采货侠JAVA开发工程师分享概要一、服务划分二、系统设计1、首次消息发送2、重试消息发送三、稳定性的保障1、流量突增2、问题服务的资源隔离3、第三方服务的保护4、中间件的容错5、完善...
- 运维实战:深度拆解Systemd定时任务原理，90%的人不知道的玩法
-
运维实战：深度拆解Systemd定时任务原理，90%的人不知道的高效玩法一、Systemd定时任务的核心原理Systemd定时任务是Linux系统中替代传统cron的现代化解决方案，通过...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)