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.mzph.cn/news/835658.shtml

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

相关文章

探讨 vs2019 c++ 里函数指针与函数类型在使用上的语法区别

(1)咱们可以用 decltype () 来判断函数的类型。但以这个类型定义有用的可指向已存在函数的变量,却行不通。测试如下: 如果把上面的注释去掉会报错: 所以函数类型只有语法意义。但在使用上没有函…

【C语言】/*操作符(下)*/

目录 一、操作符的分类 二、二进制和进制转换 2.1 进制 2.2 进制之间的转换 三、原码、反码、补码 四、单目操作符 五、逗号表达式 六、下标引用操作符[] 七、函数调用操作符() 八、结构体成员访问操作符 8.1 直接访问操作符(.) 8.2 间接访问操作符(->) 九、操作符…

修改el-checkbox样式

一定要在最外层; //未选中框/deep/ .el-checkbox__inner{border-color: #0862a3;}//选中框/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{background-color: #0862a3;border-color: #0862a3;}//未选中框时右侧文字/deep/ .el-checkbox__label{}//选中…

git 推送github 选https遇到登录 openSSH问题

使用https需要使用github令牌token作为密码, 使用SSH不需要登录。 还有一个问题: 创建github仓库后没有quick setup页面解决办法 千万不要点击任何多的操作!!!输入仓库名,直接create!&#x…

return语句

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 return语句 一、return语句后面跟表达式二、return无返回三、return返回的值和函数返回类型不一致四、return语句执行后,后方仍然存在代码五、存在分支语句,需考虑…

去哪里找高清视频素材?推荐几个短视频素材免费网站

在数字时代,视频内容的质量直接影响观众的吸引力和留存率。尤其是高清、4K视频素材和可商用素材,它们在提升视觉质量和叙事深度方面起到了至关重要的作用。以下是一些国内外的顶级视频素材网站,它们提供的资源将为您的创作提供极大的支持和灵…

LeetCode/NowCoder-链表经典算法OJ练习1

目录 说在前面 题目一:移除链表元素 题目二:反转链表 题目三:合并两个有序链表 题目四:链表的中间节点 SUMUP结尾 说在前面 dear朋友们大家好!💖💖💖数据结构的学习离不开刷题…

机器人系统仿真

0、何为仿真 通过计算机对实体机器人系统进行模拟的技术。 1、为何仿真 低成本: 机器人实体一般价格昂贵,为降低机器人学习、调试的成本;高效: 搭建的环境更为多样且灵活,可以提高测试效率以及测试覆盖率&#xff1b…

三大消息传递机制区别与联系

目录 总结放开头 1、定义区别: EventBus Broadcast Receiver Notification 2、使用区别: EventBus Broadcast Receiver Notification 3、补充通知渠道: 通知渠道重要程度 总结放开头 BroadCast Receiver:属于安卓全局监听机制,接收…

【算法】最短路问题 bfs 到 dijkstra

1976、到达目的地的方案数 你在一个城市里,城市由 n 个路口组成,路口编号为 0 到 n - 1 ,某些路口之间有 双向 道路。输入保证你可以从任意路口出发到达其他任意路口,且任意两个路口之间最多有一条路。 给你一个整数 n 和二维整…

五一 大项目--docker-compose编排lnmp完成wordpress

Docker 中的 Nginx 服务为什么要启用 HTTPS 一安装容器 1 安装docker-20.10.17 2 安装所需的依赖 sudo yum install -y yum-utils device-mapper-persistent-data lvm23 添加Docker官方仓库 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos…

Linux-线程概念

1. 线程概念 线程:轻量级进程,在进程内部执行,是OS调度的基本单位;进程内部线程共用同一个地址空间,同一个页表,以及内存中的代码和数据,这些资源对于线程来说都是共享的资源 进程:…

RabbitMQ (windows) 安装

大家好我是苏麟 , 今天安装一下 RabbitMQ . 官网 : RabbitMQ: One broker to queue them all | RabbitMQ 1.点击 Getting Started 2. 点击 Docs 3.点击 Install And Upgrade 4.点击 installation via Chocolatory 5. 直接下载安装包 RabbitMQ 下好了先放在一遍 RabbitMQ 需要 E…

【C++】-------反向迭代器的模拟实现(补充)

目录 前言 一、反向迭代器接口(用户层) 二、模拟实现 三、以vector模拟实现为例 四、总结 前言 在vector和list的接口中我们实际上有说明过反向迭代器的用法,这里就有个问题,并不是只有这两个容器存在反向迭代器的。那么对于他…

点云DBSCAN聚类,同时获取最多点数量的类,同时删除其他的类并显示

代码的主要目的是处理一个点云文件(从某个巷道或类似环境中获取的),并尝试识别并可视化其中的主要结构(比如墙壁),同时去除可能的噪声和异常点。它首先读取一个点云文件,进行降采样和异常点移除,然后使用DBSCAN聚类算法对剩余的点云进行聚类,最后选择并可视化包含最多…

应用案例 | 商业电气承包商借助Softing NetXpert XG2节省网络验证时间

一家提供全方位服务的电气承包商通过使用Softing NetXpert XG2顺利完成了此次工作任务——简化了故障排查的同时,还在很大程度上减少了不必要的售后回访。 对已经安装好的光纤或铜缆以太网网络进行认证测试可能会面临不同的挑战,这具体取决于网络的规模、…

示例五、气敏传感器

通过以下几个示例来具体展开学习,了解气敏传感器原理及特性,学习气敏传感器的应用: 示例五、气敏传感器 一、基本原理:随着人们生活水平的不断提高,人们对环境和健康问题越来越重视。各种燃气的广泛使用,使生产效率和…

多模态CLIP和BLIP

一、CLIP 全称为Contrastive Language-Image Pre-Training用于做图-文匹配,部署在预训练阶段,最终理解为图像分类器。 1.背景 以前进行分类模型时,存在类别固定和训练时要进行标注。因此面对这两个问题提出CLIP,通过这个预训练…

B 站评论系统架构设计难点

更多大厂面试内容可见 -> http://11come.cn B 站评论系统架构设计难点 这里整理一下在哔哩哔哩技术公众号看到的 B 站评论系统的架构设计文章,自己在学习过程中,对其中感觉比较有帮助的点做一下整理,方便以后查阅,详细版可以点…

Portforge:一款功能强大的轻量级端口混淆工具

关于Portforge Portforge是一款功能强大的轻量级端口混淆工具,该工具使用Crystal语言开发,可以帮助广大研究人员防止网络映射,这样一来,他人就无法查看到你设备正在运行(或没有运行)的服务和程序了。简而言…