从零开始搭建后端信息管理系统(新手小白比如)

如果你是新手小白,首先我们要进行一些准备工作,安装一些基础软件,

备注一下:这里安装的vue环境的后台管理系统,不同的后台管理系统,需要安装不同的插件

准备工作:

安装

Visual Studio Code

nodejs

配置插件

 

 首先安装开发环境Visual Studio Code

打开官网:下载 Visual Studio Code - Mac、Linux、Windows

选择对应的系统,我这是window系统,以windows系统为例

打开安装程序,进行安装

在这里,可以选择安装路径

点击下一步

选择创建桌面快捷方式,在点击下一步,然后点击完成

到这里我们的第一步开发环境就安装好了

第二步:安装nodejs

打开官网:

下载 | Node.js 中文网

下载对应版本

加载完成之后,打开安装程序

 

 在这里可以配置安装程序的位置,可以转移到D盘。

根据上面的图片进行安装,这里我们就都使用系统默认的配置就可以

安装成功之后,我们还要进行检验

使用

node -v

node -v 命令在命令行中进行查看

win+r打开命令行,输入cmd

如果出现上面的内容,代表已经安装成功

如果没有,那可能需要是配置环境变量没有配置。

配置环境变量

搜索环境变量

点击环境变量

在这里要说的是,这里有两个环境变量,一个是用户自己的,一个是系统的环境变量,这两个环境变量不相同,一般的话,都是配置用户的,如果不行,在配置系统的

在用户的环境变量中,找到Path双击打开

 点击新建,找到之前安装的nodejs的文件位置,复制过去,这里以我的为例

点击确定

再次检验,应该就行了

第三部安装插件

打开开发者工具

打开拓展

 搜索vue,安装Vue-Officical插件

安装之后

 到这里,恭喜你,所有的安装准备工作就完成了

第四步,我们要下载一个vue项目进行运行

这里推荐这几个网站,都是免费的

Fantastic-admin | 一款 Vue 中后台管理系统框架 (gitee.io)

装载。。。 (buildadmin.com)

GitCode - 开发者的代码家园

上面这些网站都是可以下载后台项目。

这里我以下面的这个项目为例

vue-element-plus-admin: 一套基于vue3、element-plus、typescript4、vite3的后台集成方案 (gitee.com)

打开网页

 

 

 需要进行一个验证,

在window浏览器下载的文件,一般都在

文件管理系统的下载文件夹下

 

下载完之后打开文件夹

 下载完之后,进行解压

这里我解压到桌面方便操作,也可以解压到其它地方

用开发者工具打开

在terminal命令行中输入命令:

在这里说一下,安装命令和运行命令,都有很多种

项目的命令依赖,要根据具体情况

主要放在 package.json文件下

这里给出常用的两种 

安装依赖命令

npm install#或者采用
pnpm install

 

 

 

安装后之后进行运行

npm start#或者npm run dev

 

 打开网址

 恭喜你,你已经可以成功搭建一个后台管理系统里,可以登录看看。

 这里只是一个后台模版,还需要根据你自己的情况,进行配置和组合。

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

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

相关文章

python制造虚拟姓名电话保存到mysql数据库

#启动命令:1、python test.py import os # 开始-需要安装的模块列表 #需要安装的库 libs ["requests","mysql-connector-python"] #循环遍历安装 for lib in libs:os.system("pip install -i https://pypi.tuna.tsinghua.edu.cn/simple " lib…

刷代码随想录有感(27):重复的子字符串

题干&#xff1a; 代码&#xff1a; class Solution { public:void getNext(int *next, string &s){int j 0;next[0] 0;for(int i 1; i < s.size(); i){while(j > 0 && s[i] ! s[j]){j next[j - 1];}if(s[i] s[j]){j;}next[i] j;}}bool repeatedSubst…

Javascrip变量定义使用技巧

在JavaScript中&#xff0c;var、const 和 let 都是用来声明变量的关键字&#xff0c;但它们之间存在一些重要的相同点和差异点。 现代的JavaScript开发中&#xff0c;推荐优先使用 const 和 let&#xff0c;并尽量避免使用 var&#xff0c;以编写更可靠、更易于维护的代码。 …

Java并查集(含面试大厂题和源码)

并查集&#xff08;Union-Find&#xff09;是一种用于处理一些不交集合合并及集合间元素查找问题的数据结构。它提供了两个主要的操作&#xff1a;查找&#xff08;Find&#xff09;和合并&#xff08;Union&#xff09;。查找操作用于确定某个元素属于哪个集合&#xff0c;而合…

学习基于pytorch的VGG图像分类 day2

注&#xff1a;本系列博客在于汇总CSDN的精华帖&#xff0c;类似自用笔记&#xff0c;不做学习交流&#xff0c;方便以后的复习回顾&#xff0c;博文中的引用都注明出处&#xff0c;并点赞收藏原博主. 目录 VGG网络搭建&#xff08;模型文件&#xff09; 1.字典文件配置 2.提取…

基于java+springboot+vue实现的农产品智慧物流系统(文末源码+Lw)23-239

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#…

Python创建现代GUI应用程序库之ttkbootstrap使用详解

概要 ttkbootstrap是一个基于Python的Tkinter库构建的,用于创建现代GUI应用程序。它结合了Tkinter的简洁性和Bootstrap框架的美观,提供了丰富的组件和样式,使开发人员能够快速构建美观、响应式的桌面应用程序。 安装 通过pip可以轻松安装ttkbootstrap: pip install ttkb…

CentOS 7详细介绍。

CentOS 7是CentOS项目发布的开源类服务器操作系统&#xff0c;自2014年7月7日正式发布以来&#xff0c;它已成为企业级Linux发行版本的佼佼者。CentOS 7不仅继承了其前身的优势&#xff0c;还在性能、安全性和易用性方面进行了显著的提升。以下是对CentOS 7的详细介绍。 一、C…

阿里云服务器北京地域多少钱?北京地域最新收费标准及便宜购买教程

阿里云服务器在国内有十几个地域可选&#xff0c;北京地域主要适合北方用户选择&#xff0c;2024年阿里云中国内地地域云服务器做了降价调整&#xff0c;因此收费标准也有所变化&#xff0c;本文为大家展示阿里云服务器北京地域最新的收费标准&#xff0c;以及在实际购买过程中…

JUC-线程的创建、运行与查看

创建和运行线程 Thread创建线程 Thread 创建线程方式&#xff1a;创建线程类&#xff0c;匿名内部类方式 start() 方法底层其实是给 CPU 注册当前线程&#xff0c;并且触发 run() 方法执行线程的启动必须调用 start() 方法&#xff0c;如果线程直接调用 run() 方法&#xff…

Spring day1

day01_eesy_01jdbc pom.xml<packaging>jar</packaging> <dependencies><!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java --><!--依赖--><dependency><groupId>mysql</groupId><artifactId>mysql-…

设计模式-接口隔离原则

基本介绍 客户端不应该依赖它不需要的接口&#xff0c;即一个类对另一个类的依赖应该建立在最小的接口上先看一张图: 类A通过接口Interface1 依赖类B&#xff0c;类C通过接口Interface1 依赖类D&#xff0c;如果接口Interface1对于类A和类C来说不是最小接口&#xff0c;那么类…

什么是多路复用器滤波器

本章将更深入地介绍多路复用器滤波器&#xff0c;以及它们如何用于各种应用中。您将了解到多路复用器如何帮助设计人员创造出更复杂的无线产品。 了解多路复用器 多路复用器是一组射频(RF)滤波器&#xff0c;它们组合在一起&#xff0c;但不会彼此加载&#xff0c;可以在输出之…

算法| ss 贪心

134.加油站455.分发饼干860.柠檬水找零2171.拿出最少数目的魔法豆 134.加油站 /*** param {number[]} gas* param {number[]} cost* return {number}*/ // 思路 // 判断: 汽油和 < 消耗和 return -1 // while循环遍历 从0开始, 计算是否有剩余 ,有就继续 没有就从下个点开…

Linux网络名称空间与网络协议栈:区别、联系与理解

在深入探讨Linux网络名称空间和网络协议栈之间的区别和联系之前&#xff0c;重要的是先明确这两个概念的定义。网络名称空间是Linux提供的一种虚拟化技术&#xff0c;允许在同一物理机器上运行的不同进程组拥有独立的网络环境&#x1f3e2;。而网络协议栈是操作系统用于实现网络…

React中的useMemo和useCallback:它们的区别及应用场景

React中的useMemo和useCallback&#xff1a;它们的区别及应用场景 1. useMemo&#xff1a;用于缓存计算结果2. useCallback&#xff1a;用于缓存函数3. 区别4. 应用场景4.1 useMemo的应用场景4.2 useCallback的应用场景 在React的Hooks API中&#xff0c;useMemo和useCallback是…

视频图像的两种表示方式YUV与RGB(3)

上篇文章介绍了YUV的采样格式&#xff0c;本篇重点介绍YUV的存储方式。接下来将用图形式给出常见YUV图像的存储方式&#xff0c;并在存储方式后面附有取样每个像素点YUV的数据方法&#xff0c;图中&#xff0c;Cb、Cr的含义等同于U、V。 YUYV为YUV422采样的存储格式中的一种&a…

探索 2024 年最佳编码自定义 GPT

如何利用GPT技术优化您的软件开发流程&#xff1f; 介绍 在快速发展的技术世界中&#xff0c;人工智能 (AI) 已成为创新的基石&#xff0c;特别是在编码和软件开发领域。 改变这一格局的人工智能工具之一是自定义 GPT。 这些先进的模型不仅彻底改变了我们的编码方式&#xff0c…

linux fixmap分析

本文基于Linux-4.19.125&#xff0c; ARM V7&#xff0c;dual core, MMU采用2级页表&#xff08;未开启LPAE&#xff09;。 1 为什么需要fixmap Linux内核启动过程中&#xff0c;经过汇编阶段后&#xff0c;mmu功能已经开启&#xff0c;后续只能通过虚拟地址来访问DDR&#x…

刷题日记——机试(3)

8.约瑟夫问题的实现 分析 创建一个队列和一个计数器&#xff0c;计数器初值为0&#xff0c;判断队列成员数是否为1&#xff0c;如果不是转3&#xff0c;是转6计数器每次1并且对k取余&#xff0c;然后将队首出队如果计数器值为0&#xff0c;那么回到2继续执行&#xff0c;如果不…