003 后台系统-搭建前端环境

news2024/9/26 3:28:38

课程链接

一.下载和配置vscode与nodejs

1.vscode视频链接
2.打开vscode下载以下插件:
在这里插入图片描述
3.安装nodejs16.19.0
在这里插入图片描述
4.检测nodejs是否安装成功,安装地址无中文
在cmd界面输入命令:node -v 显示版本则安装成功
5.在vscode中创建工作区

  • 在电脑中创建一个空文件夹,命名无中文。
  • 在vs上打开空文件夹,并保存为工作区
    在这里插入图片描述
  • 路径:文件-将工作区另存为
  • 在文件夹出现工作区文件则成功
    在这里插入图片描述

二.配置Vue3-Element-Admin

1.官网地址
2.将克隆的项目进行下载解压到工作间
在这里插入图片描述
3.注意package.json文件中的dependencies依赖
在这里插入图片描述
4.下载依赖

  • 在项目中打开终端输入命令: npm-install
  • (下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org)
  • 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。
    在这里插入图片描述
    5.启动项目
  • 修改bug:将src下的permission.js中
  • 原代码:
  • import { TOKEN } from ‘@/store/modules/app’ // TOKEN变量名
  • 更改为如下代码:
  • import { TOKEN } from ‘@/pinia/modules/app’ // TOKEN变量名
  • 在终端中输入 npm-start
    在这里插入图片描述

3.总结

学到了vscode安装配置,nodejs安装配置,学习了vscode
的工作区添加方法,学会了快速前端搭建方法

4.遇到的问题

出现未知bug:在下载好依赖后启动出现白屏,F12查看是无资源,解决方案是换了老师的包才成功

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

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

相关文章

嵌入式 Tomcat 调校

SpringBoot 嵌入了 Web 容器如 Tomcat/Jetty/Undertow,——这是怎么做到的?我们以 Tomcat 为例子,尝试调用嵌入式 Tomcat。 调用嵌入式 Tomcat,如果按照默认去启动,一个 main 函数就可以了。 简单的例子 下面是启动…

T113-S3-buildroot文件系统tar解压缩gz文件

目录 前言 一、现象描述 二、解决方案 三、tar解压缩.gz文件 总结 前言 本文主要介绍全志T113-S3平台官方SDK,buildroot文件系统tar不支持.gz文件解压缩的问题以及如何配置buildroot文件系统解决该问题的方法介绍。 一、现象描述 在buildroot文件系统中&#xff…

图像压缩(4)《数字图像处理》第八章 8.3节 数字图像水印

图像压缩(3)《数字图像处理》第八章8.3节数字图像水印 一. 前言二.章节引言三.简单综述三.本章小结四.参考文献四. 小结 一. 前言 始于那本深蓝色的大块头,冈萨勒斯的《数字图像处理》,从此走上了图像信号处理的不归路&#xff0…

Java开发-WebSocket

WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信-浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c;并实现 双向数据传输。 使用 导入maven坐标 <dependency><groupId>org.springframework.bo…

【Linux】安装配置虚拟机及虚拟机操作系统的安装

目录 一、操作系统 1. 介绍 2. 功能 3. 有哪些 4. 个人版本和服务器版本的区别 二、VMWare虚拟机 1. 安装 2. 配置 三、安装配置Windows Server 1. 配置 2. 安装 四、虚拟机的环境配置及连接 1. 主机连接虚拟机 2. 虚拟机环境配置及共享 3. 环境配置 一、操作系…

音乐网站播放器前后端【源码好优多】

介绍 音乐网站播放器音乐网站管理系统音乐网站后台 软件架构 使用vuespringbootmybatis-plusmysql技术的前后端分离项目 前端 安装教程 npm install&#xff08;安装运行环境&#xff09; npm run dev&#xff08;运行&#xff09; 需要有node.js环境&#xff0c;不建议使…

设计模式——UML类图

目录 UML类图介绍UML图UML图的分类 关系依赖关系泛化关系实现关系关联关系聚合关系 UML类图 介绍 uml(统一建模语言)&#xff0c;是一种用于软件系统分析和设计的语言工具&#xff0c;他用于帮助软件开发人员进行思考和记录思路的结果UML本身是一套符号的规定&#xff0c;就像…

linuxnfs服务安装与配置实践

目录 一.NFS服务 二.NFS和RPC的概念 三.什么是RPC 四.工具 五.安装配置NFS环境 1.查看一下是否有nfs-utils和rpcbind软件包的安装rpm包 2.安装nfs-utils 、rpcbind 3.环境配置 1.nfs配置文件需要遵守如下规则&#xff1a; 2.nfs语法参数解释&#xff1a; 3.nfs客户端…

Python:实现日历到excel文档

背景 日历是一种常见的工具,用于记录事件和显示日期。在编程中,可以使用Python编码来制作日历。 Python提供了一些内置的模块和函数,使得制作日历变得更加简单。 在本文,我们将探讨如何使用Python制作日历,并将日历输出到excel文档中。 效果展示 实现 在代码中会用到cale…

springboot actuator 常用接口

概述 微服务作为一项在云中部署应用和服务的新技术是当下比较热门话题&#xff0c;而微服务的特点决定了功能模块的部署是分布式的&#xff0c;运行在不同的机器上相互通过服务调用进行交互&#xff0c;业务流会经过多个微服务的处理和传递&#xff0c;在这种框架下&#xff0…

轻松驾驭!Prometheus 如何监控指标,快速定位故障

Prometheus 监控业务指标 在 Kubernetes 已经成了事实上的容器编排标准之下&#xff0c;微服务的部署变得非常容易。但随着微服务规模的扩大&#xff0c;服务治理带来的挑战也会越来越大。在这样的背景下出现了服务可观测性&#xff08;observability&#xff09;的概念。 在…

vue 记账清单

通过发送请求来从后台获取更改数据&#xff0c;需要用到钩子函数。 使用ECharts来渲染饼图。 在渲染函数中setOption动态更新饼图&#xff08;map&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" />&l…

linux-防火墙

目录 一、防火墙概念 1.软件防火墙 2.iptables默认规则 3.iptables的五链 4.iptables动作 5.四表五链 6.iptables实例 一、防火墙概念 linux下防火墙一般分为软件防火墙、硬件防火墙 硬件防火墙&#xff1a;在硬件的级别实现防火墙过滤功能&#xff0c;性能高&#xf…

360智慧生活旗舰产品率先接入“360智脑”能力实现升级

10月25日&#xff0c;360智慧生活秋季新品及视觉云方案发布会在深圳召开。360智能硬件产品&#xff0c;诸如 360可视门铃、360智能摄像机、360行车记录仪、360儿童手表和家庭防火墙等&#xff0c;都在各自的行业有着举足轻重得地位&#xff0c;而这次发布的系列新品&#xff0c…

使用Golang策略和最佳实践高效处理一百万个请求

有效处理一百万个请求的策略与最佳实践 在不断发展的Web应用程序领域&#xff0c;处理大规模请求的能力是成功的关键因素。作为一名全栈开发人员&#xff0c;您可能熟悉Golang的效率和性能。在本文中&#xff0c;我们将深入探讨如何利用Golang来优雅地处理处理一百万个请求的挑…

【ICLR23论文】Can CNNs Be More Robust Than Transformers?

文章目录 0 Abstract1 Introduction2 Related Works3 Settings3.1 CNN Block Instantiations3.2 Computational Cost3.3 Robustness Benchmarks3.4 Training Recipe3.5 Baseline Results 4 Component Diagnosis4.1 Patchief Stem4.2 Large Kernel Size4.3 Reducing Activation …

安装 tensorflow==1.15.2 遇见的问题

一、直接安装 命令&#xff1a;pip install tensorflow1.15.2 二、换 阿里云 镜像源 命令&#xff1a;pip install -i http://mirrors.aliyun.com/pypi/simple tensorflow1.15.2 三、换 豆瓣 镜像源 命令&#xff1a;pip install http://pypi.douban.com/simple tensorflow1…

Android Glide判断图像资源是否缓存onlyRetrieveFromCache,使用缓存数据,Kotlin

Android Glide判断图像资源是否缓存onlyRetrieveFromCache&#xff0c;使用缓存数据&#xff0c;Kotlin import android.graphics.Bitmap import android.os.Bundle import android.util.Log import android.widget.ImageView import androidx.appcompat.app.AppCompatActivity…

“第五十天” 机组--数据的表示

数据的表示和运算&#xff1a; 进位计数制&#xff1a; 对于我们现在使用的如十进制计数法&#xff0c;二进制计数法等&#xff0c;符号反映权重&#xff0c;比如十进制的0~9&#xff0c;9这个符号的权重和0是不一样的&#xff0c;而且现在的计数法符号所在位置也反映权重&am…