1.前端环境搭建

1.安装nodejs

因为我们开发Vue项目需要使用npm命令来创建和启动,安装node.js是为了获得这个命令,目前和使用node.js无关
下载地址:http://nodejs.cn/download/
下载完之后安装,通过cmd查看是否安装成功

node --version

在这里插入图片描述

2.创建项目

这里我们用vite创建项目

npm init vite@latest Yao.admin

我们使用Vue+TypeScript
在这里插入图片描述
在这里插入图片描述
然后就会在你所在的目录创建项目初始化
在这里插入图片描述
然后切换到项目路径执行npm install
在这里插入图片描述

在这里插入图片描述

3.安装pnpm

因为网络问题我们大部分情况下用pnpm安装的速度会更快一点

npm install -g pnpm

在这里插入图片描述

4.安装Scss

因为我们的项目采用SCSS,所以用我们刚刚的pnpm安装一下SCSS

pnpm install sass  --save

在这里插入图片描述

5.安装Element Plus

因为我们的项目采用Element Plus ,所以用我们刚刚的pnpm安装一下SCSS
官网:https://element-plus.org/zh-CN/

pnpm install element-plus --save

在这里插入图片描述
然后在package.json 查看是否有element的配置
在这里插入图片描述

5.1在项目中引用element plus

首先在VsCode中打开我们的项目
在src\main.ts文件中添加引用

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

6.运行我们的项目

执行 pnpm dev
在这里插入图片描述
这里遇到 pnpm : 无法加载文件 因为在此系统上禁止运行脚本。有关详细信息,请参阅
是因为我们VisualCode命令行执行策略,默认设置为Restricted不加载配置文件或运行脚本。需变更设置为RemoteSigned
需要用管理员权限执行VisualCode,然后执行命令

set-ExecutionPolicy RemoteSigned

然后在运行我们的项目,有这个提示证明我们的项目成功运行
在这里插入图片描述
然后打开对应的地址,我这里是http://localhost:5173/
在这里插入图片描述
到这里证明我们的前端项目已经创建成功

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

老板必读:防数据泄露,保卫您的商业秘密

在信息技术高速发展的今天,数据泄露已成为所有企业都必须正视的风险。对于企业而言,数据不仅仅是一堆数字和信息的集合,更是企业的核心竞争力与商业秘密的载体。一旦数据泄露,不仅会导致经济损失,还可能使企业信誉受损…

如何解读 Web 自动化测试 Selenium API?

Web自动化测试是一种通过编写代码来模拟用户操作,并验证Web应用程序的功能和性能的技术。Selenium是一个流行的Web自动化测试工具,它提供了一组API来与Web浏览器进行交互。在本文中,我们将深入探讨Selenium API,并解释如何从零开始…

conan2 基础入门(01)-介绍

conan2 基础入门(01)-介绍 文章目录 conan2 基础入门(01)-介绍⭐什么是conan官网Why use Conan? ⭐使用现状版本情况个人知名开源企业 ⭐ConanCenter包中心github ⭐说明文档END ⭐什么是conan 官网 官网:Conan 2.0: C and C Open Source Package Manager 一句话来…

二维视觉尺寸测量简单流程

代码示例:opencv实战---物体尺寸测量_opencv尺寸测量精度-CSDN博客 灰度化 简化图像处理:灰度图像只包含亮度信息,不包含颜色信息,因此数据量比彩色图像小,处理起来更加简单和快速。这对于需要实时处理大量图像数据的场…

virtualbox下ubantu20.04版本实现与window的复制粘贴

1.建议开启双向 2.打开Ubuntu命令终端 快捷键 ctrialtt,具体在设置里面查看快捷键 3.卸载已有工具 sudo apt-get autoremove open-vm-tools4.安装 sudo apt-get install open-vm-tools-desktop5.记得sudo reboot重启 sudo reboot这里记得加上sudo,…

python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解

这篇文章主要介绍了python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 JDBC Request 这个 Sampler 可以向数据…

大模型时代,程序员如何卷?

最近在看电影《碟中谍7》,该片讲述了特工伊森亨特尝试与一个被称为智体的全能人工智能作战,其可以即时访问任何在线网络,他和他的团队成员试图找回控制人工智能智体所必需的两部分钥匙并将其摧毁的故事。 在剧中,智体是一个虚拟反…

Java --- 集合(2)--- 这篇文章让你学会如何使用List集合

本期文章来自黑马程序员以及Java入门到精通,希望各位大佬发现文章的瑕疵及时表出,另外也感谢您的收看。话不多说,直接进入正题...... 目录 一.List集合的使用: 二.三种遍历List方式: 首先还是给大家呈现这幅图&#x…

Coursera吴恩达深度学习专项课程01: Neural Networks and Deep Learning 学习笔记 Week 03

Neural Networks and Deep Learning Course Certificate 本文是学习 https://www.coursera.org/learn/neural-networks-deep-learning 这门课的笔记 Course Intro 文章目录 Neural Networks and Deep LearningWeek 03: Shallow Neural NetworksLearning Objectives Neural Ne…

短剧APP开发,为短剧市场提供更多活力

近年来,短剧一直是一个大热赛道,不仅各大视频平台刮起了一股短剧热潮,各大品牌也纷纷开始进军短剧市场。短剧作为当下的流量密码,深受各大短剧观众与创业者的关注。吸引了大量的资本、制作方涌入到市场中,短剧行业发展…

taro3兼容支付宝/微信小程序的自定义拖拽排序组件

描述:列表可以完成拖拽排序 此组件是根据支付宝原生文档改编成taro-vue3的形式,只保留了拖拽的部分,其他功能都去除了,测试下来可以兼容支付宝和微信小程序。 支付宝原生文档: https://opendocs.alipay.com/support/…

未来办公新方式--智能体与程序完美配合

Agent AI智能体的未来 工作中,有时候我们就像是在不停地踩着缝纫机,重复地做着那些单调乏味的任务,不仅耗时费力,还特别容易出错。可是,咱们现在可是生活在数字化时代啊!这时候,Python编程语言…

基于Nios软件实现流水灯+串口输出

基于NIOS-II软核实现流水灯串口输出 引言: ​ 在现代电子设计领域,FPGA(现场可编程门阵列)因其灵活性和并行处理能力而成为实现复杂数字系统的首选平台。Nios II,作为Altera(现为Intel旗下)提供…

综合能力 | 误差 | 学习笔记

误差指真值与观测值的差值。 误差分为系统误差(消除方法:观测方法、仪器校正、修正等)、偶然误差(符合正态分布规律,进行计算纠正)、粗差(一般舍弃)。 中误差(均方差或标…

Linux进程——进程地址空间

前言:在讲完环境变量后,相信大家对Linux有更进一步的认识,而Linux进程概念到这也快接近尾声了,现在我们了解Linux进程中的地址空间! 本篇主要内容: 了解程序地址空间 理解进程地址空间 探究页表和虚拟地址空…

决策树的学习(Decision Tree)

1.对于决策树的概念: **本质上:**决策树就是模拟树的结构基于 if-else的多层判断 2.目的: 对实例进行分类的树形结构,通过多层判断,将所提供的数据归纳为一种分类规则。 3.优点: 1.计算量小,…

华为配置Ethernet over GRE实现AC与无线网关之间的二层互通

华为配置Ethernet over GRE实现AC与无线网关之间的二层互通 组网图形 图1 通过Ethernet over GRE实现AC与无线网关之间的二层互通的组网图 组网需求数据规划配置思路操作步骤配置文件 组网需求 如图1所示,某企业通过无线网络为用户提供上网服务,其中A…

【35分钟掌握金融风控策略21】贷前额度策略

目录 贷前策略审批流程和统一额度管理 贷前策略审批流程 统一额度管理 预授信策略 贷前策略审批流程和统一额度管理 贷前包含了多个风控场景,这些风控场景的策略在执行时是否存在先后顺序呢?在贷前,除上述主要的风控场景,还有…

Flink DataSource介绍

介绍 Flink的Data Source(数据源、源算子)是Flink作业的起点,它定义了数据输入的来源。Flink可以从各种数据来源获取数据,例如文件系统、消息队列、数据库等。以下是对Flink Data Source的详细介绍: 概述&#xff1a…

ZigBee设备入网流程抓包分析(以飞利浦灯泡为例)

1.第一步,网关打开入网许可,广播Pjoin 2.第二步,设备开始扫网,发送Beacon Request 3.第三步,网关收到Beacon Request请求后,应答Beacon数据帧 4.收到可入网的Beacon帧后,发送关联请求&#xff0…