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,一经查实,立即删除!

相关文章

FFmpeg提取视频参数,以及剪辑视频,拼接视频,合并视频,抽帧等

FFmpeg提取视频参数&#xff0c;以及剪辑视频&#xff0c;拼接视频&#xff0c;合并视频&#xff0c;抽帧等 视频封面图获取视频 视频封面图获取 #ifndef _BUFFER_CONTAINER_H_ #define _BUFFER_CONTAINER_H_ #include <Memory>template <typename T> class Buffer…

【力扣】1089.复写零

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 给你一个长度固定的整数数组 arr &#xff0c;请你将该数组中出现的每个零都复写一遍&#xff0c;并将其余的元素向右平移。 注意&#xff1a;请不…

深度探索Edge浏览器

深度探索Edge浏览器 随着网络技术的不断发展和人们对浏览体验要求的提高&#xff0c;浏览器作为我们日常上网的重要工具&#xff0c;其性能、安全性和易用性都成为了用户关注的重点。近年来&#xff0c;微软推出的Edge浏览器凭借其卓越的性能和独特的功能&#xff0c;逐渐成为…

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

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

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

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

openGauss学习笔记-280 openGauss性能调优-实际调优案例09-修改启动参数解决TPCC大幅度波动

文章目录 openGauss学习笔记-280 openGauss性能调优-实际调优案例09-修改启动参数解决TPCC大幅度波动280.1 现象描述280.2 优化分析openGauss学习笔记-280 openGauss性能调优-实际调优案例09-修改启动参数解决TPCC大幅度波动 280.1 现象描述 openGauss数据库在4路鲲鹏服务器单…

修改el-checkbox样式

一定要在最外层&#xff1b; //未选中框/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作为密码&#xff0c; 使用SSH不需要登录。 还有一个问题&#xff1a; 创建github仓库后没有quick setup页面解决办法 千万不要点击任何多的操作&#xff01;&#xff01;&#xff01;输入仓库名&#xff0c;直接create&#xff01;&#x…

return语句

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

c++二分查找

左闭右闭 left 0; right numsize - 1; while(left<right) {middle (leftright)/2;if(nums[middle]>target){right middle-1;}else if(nums[middle]<target){left middle 1;}else return middle; } return -1; 左闭右开 left 0;right numsize; while(left&l…

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

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

spring 创建bean的过程

spring 创建bean的过程 生成BeanDefinition – > 合并BeanDefinition --> 创建单例Bean对象(非懒加载) --> 依赖注入(属性赋值) --> 初始化前(PostConstruct)–>初始化(InitializingBean)–>初始化后(AOP)–>bean AbstractAutowireCapableBeanFactory.d…

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

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

接口测试的流程

1.拿到接口api文档(通过抓包工具获取)&#xff0c;熟悉接口业务&#xff0c;接口地址&#xff0c;鉴权方式&#xff0c;入参码。 2.编写接口用例以及评审, 思路: 正例:输入正常入参&#xff0c;接口能够成功返回数据 反例: 鉴权反例: 鉴权码…

机器人系统仿真

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

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

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

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

1976、到达目的地的方案数 你在一个城市里&#xff0c;城市由 n 个路口组成&#xff0c;路口编号为 0 到 n - 1 &#xff0c;某些路口之间有 双向 道路。输入保证你可以从任意路口出发到达其他任意路口&#xff0c;且任意两个路口之间最多有一条路。 给你一个整数 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. 线程概念 线程&#xff1a;轻量级进程&#xff0c;在进程内部执行&#xff0c;是OS调度的基本单位&#xff1b;进程内部线程共用同一个地址空间&#xff0c;同一个页表&#xff0c;以及内存中的代码和数据&#xff0c;这些资源对于线程来说都是共享的资源 进程&#xff1a;…

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…