测试平台——前端框架

一、创建vue项目

npm init vite@latest web_class

wyl@WYLdeMacBook-Air testplatform % npm init vite@latest web_class   
✔ Select a framework: › Vue
✔ Select a variant: › JavaScriptScaffolding project in /Users/wyl/workspace/testplatform/web_class...Done. Now run:cd web_classnpm installnpm run devwyl@WYLdeMacBook-Air testplatform % 

二、安装插件

三、打开项目

文件-打开文件夹,选择项目根目录(web_class目录)

四、运行

终端-新建终端

输入 npm run dev,提示:sh: vite: command not found

wyl@WYLdeMacBook-Air web_class % npm run dev> web_class@0.0.0 dev
> vitesh: vite: command not found
wyl@WYLdeMacBook-Air web_class %

输入 npm i ,安装项目需要的包,卡住不执行了

wyl@WYLdeMacBook-Air web_class % npm i
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠧ idealTree:web_class: sill idealTree buildDeps

清除缓存,设置镜像源

wyl@WYLdeMacBook-Air web_class % npm cache verify
Cache verified and compressed (~/.npm/_cacache)
Content verified: 5 (11813355 bytes)
Index entries: 5
Finished in 0.024s
wyl@WYLdeMacBook-Air web_class % npm config set registry https://registry.npmmirror.comwyl@WYLdeMacBook-Air web_class % npm config get registryhttps://registry.npmmirror.com
wyl@WYLdeMacBook-Air web_class % 

重新安装包,运行

wyl@WYLdeMacBook-Air web_class % npm iadded 28 packages in 43s
wyl@WYLdeMacBook-Air web_class % npm run  dev> web_class@0.0.0 dev
> viteVITE v5.1.6  ready in 894 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h + enter to show help
15:01:08 [vite] hmr update /src/App.vue
15:01:23 [vite] hmr update /src/App.vue (x2)

浏览器打开http://localhost:5173/ ,访问页面

五、引入element

element 官网:快速开始 | Element Plus

安装:npm install element-plus --save

引入包:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759196.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IoT 物联网场景中如何应对安全风险?——青创智通

工业物联网解决方案-工业IOT-青创智通 ​随着物联网(IoT)技术的快速发展,越来越多的设备、系统和应用被连接到互联网上,从而构建了一个庞大的物联网生态系统。然而,这种连接性也带来了前所未有的安全风险。在物联网场景…

Android Studio实现内容丰富的安卓校园公告助手

获取源码请点击文章末尾QQ名片联系,源码不免费,尊重创作,尊重劳动 093校园助手 1.开发环境 android stuido3.6 jak1.8 eclipse mysql tomcat 2.功能介绍 具体往下看第三节,功能截图 安卓端: 1.注册登录 2.校园公告列表…

持续集成平台 02 jenkins plugin 插件

拓展阅读 Devops-01-devops 是什么? Devops-02-Jpom 简而轻的低侵入式在线构建、自动部署、日常运维、项目监控软件 代码质量管理 SonarQube-01-入门介绍 项目管理平台-01-jira 入门介绍 缺陷跟踪管理系统,为针对缺陷管理、任务追踪和项目管理的商业…

【pip 安装pymssql报错】 Failed to build pymssql

在使用pip install pymssql安装pymssql时报如下图的错误&#xff1b; 报错截图 2&#xff09;查找资料说pip<3.0版本 &#xff0c;我也试了&#xff0c;不行。 你们也可以试一试&#xff1a;pip install"pymssql<3.0" 3&#xff09;我的成功方式&#xff1…

浅谈 电脑和车的对比

https://www.zhihu.com/question/547115488 电脑CPU与汽车发动机有哪些相同点与不同点&#xff1f; - 知乎 就想机械硬盘一样 我们的技术可能达不到 但是我们可以弯道超车 比如长江存储的SSD可以取代 以前的机械硬盘

流畅的 Python 第二版(GPT 重译)(八)

第十五章&#xff1a;关于类型提示的更多内容 我学到了一个痛苦的教训&#xff0c;对于小程序来说&#xff0c;动态类型很棒。对于大型程序&#xff0c;你需要更加纪律严明的方法。如果语言给予你这种纪律&#xff0c;而不是告诉你“嗯&#xff0c;你可以做任何你想做的事情”&…

WordPress Wholesale Market 插件 任意文件读取漏洞复现

0x01 产品简介 WordPress plugin Wholesale Market 是一个woocommerce扩展插件&#xff0c;使您的商店能够创建批发用户&#xff0c;并通过设置产品的批发价格。 0x02 漏洞概述 WordPress plugin Wholesale Market 2.2.1之前版本存在路径遍历漏洞&#xff0c;该漏洞源于没有…

海南省月降水量分布数据

海南省位于中国南端&#xff0c;海南岛地处热带北缘&#xff0c;属热带季风气候&#xff0c;长夏无冬。海南省雨量充沛&#xff0c;年降水量在1000毫米&#xff5e;2600毫米之间&#xff0c;年平均降水量为1639毫米&#xff0c;有明显的多雨季和少雨季。每年的5&#xff5e;10月…

鸿蒙Harmony应用开发—ArkTS-转场动画(组件内隐式共享元素转场)

geometryTransition用于组件内隐式共享元素转场&#xff0c;在组件显示切换过程中提供平滑过渡效果。通用transition机制提供了opacity、scale等转场动效&#xff0c;geometryTransition通过id绑定in/out组件(in指入场组件、out指出场组件)&#xff0c;使得组件原本独立的trans…

RabbitMQ--03--SpringAMQP(SpringBoot集成RabbitMQ)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 SpringAMQP1.SpringBoot 的支持https://spring.io/projects/spring-amqp 2.RabbitTemplate3.RabbitListener&#xff08;终极监听方案&#xff09;4.RabbitConfig--…

基于Springboot的防疫物资管理信息系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的防疫物资管理信息系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

IOS/Android App备案(uniapp)

IOS/App备案 IOS备案Android备案 IOS备案 准备好p12证书即可 链接: https://aitoolnav.caichuangkeji.com/#/AppMd5 Android备案 上DCLOUD开发者中心&#xff0c;找到相关应用后&#xff0c;直接查看证书即可获取到MD5 公钥&#xff1a;先根据上述页面下载证书&#xff0c;…

GaussDB(分布式)实例故障处理

一、说明 GaussDB Kernel实例出现故障时&#xff0c;可以按照本节的办法进行实例快速修复。 1、执行gs_om -t status --detail查看集群状态&#xff0c;cluster_state为Normal&#xff0c;balanced为No&#xff0c;请重置实例状态。 2、执行gs_om -t status --detail查看集群…

Python的内建比较函数cmp比较原理剖析

Python中的cmp()函数用于比较两个对象的大小。 cmp( x, y)&#xff1a;比较2个对象&#xff0c;前者小于后者返回-1&#xff0c;相等则返回0&#xff0c;大于后者返回1. Python的cmp比较函数比较原理 Python的cmp函数可以比较同类型之间&#xff0c;或者不同数据类型之间。然…

vue2 中使用音频

vue2 中使用音频 在 template 页面 写入 audio 标签 <template><div><audio ref"moreAudio" :src"moreAudioSrc"></audio><audio ref"noAudio" :src"noAudioSrc"></audio></div> </t…

2024 用CleanMyMac X为您的MAC清理提速吧

CleanMyMac X 是由 MacPaw 公司开发的一款针对 macOS 操作系统的电脑清理工具。它可以帮助用户清理电脑中的垃圾文件、卸载不需要的软件、优化电脑性能等。它的界面简洁明了&#xff0c;操作简单易懂&#xff0c;非常适合普通用户使用。 链接: https://pan.baidu.com/s/1_TFnrI…

练习 10 Web [MRCTF2020]你传你呢

和test5一样&#xff0c;文件上传限制为图片&#xff0c;使用.htaccess文件让上传成功图片木马文件进行执行 开屏暴击&#xff0c;差点去世 尝试上传文件 各种过滤&#xff0c;但是能传图片&#xff0c;这里就不写了&#xff0c;我做过的test5遇到过的重复内容 直接尝试在te…

【算法设计与分析】实现Trie前缀树

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串…

一个优秀的开源ChatGpt外壳项目(lobe-chat)

lobe-chat 简介&#xff1a; 开源、现代化设计的 ChatGPT/LLMs 聊天应用与开发框架支持语音合成、多模态、可扩展的插件系统&#xff0c;一键免费拥有你自己的 ChatGPT/Gemini/Ollama 应用。 下载lobe-chat lobe-chat项目开源地址&#xff1a;GitHub - lobehub/lobe-chat: &am…

Maven,pom.xml,查找 子jar包

在IDEA打开pom.xml&#xff0c;会看到这里&#xff1a; 然后如果有需要&#xff0c;把相关的 子jar包 去掉 <dependency><groupId>XXX</groupId><artifactId>XXX</artifactId><exclusions><exclusion><artifactId>xxx</a…