低代码系统前端实践之vue-element-admin运行demo

news/2024/11/1 23:29:29/

文章目录

  • 1、简介
  • 2、实践功能
  • 3、实践过程
    • 3.0 下载运行demo
    • 3.1.1 解决执行npm install或出现以下报错(删掉组件tui-editor相关即可)
    • 3.1.2 解决执行npm run dev或出现no module body-parser(安装body-parser即可)
    • 3.1.3 解决执行npm run dev或出现error:0308010C:digital envelope routines::unsupported(node版本过高导致,降低node版本、配置文件里设置永久生效,或终端执行命令单次生效)
    • 3.1.3 启动demo

1、简介

vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

2、实践功能

1)运行开源demo
2)增删功能组件
3)前后端联调api

3、实践过程

注意:node版本<=16,node>=17则会出现组件引起的启动失败
在这里插入图片描述

3.0 下载运行demo

  • 官方 git 地址:vue-element-admin
  • clone或download zip
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git# 进入项目目录
cd vue-element-admin# npm 加速安装
npm config set registry https://registry.npm.taobao.org# 安装依赖
npm install# 本地开发 启动项目
npm run dev

3.1.1 解决执行npm install或出现以下报错(删掉组件tui-editor相关即可)

在这里插入图片描述
注意: 只是删除了markdowneditor组件相关,对项目主体不受影响

  • 具体如下:
1、打开package.json把"tui-editor"删掉2、删除"tui-editor"相关路由、components,具体文件地址如下:路由位置:src/router/modules/components.js 搜索"markdown",把相应markdown路由代码删除;components位置:src/components/MarkdownEditor 删除后,再执行npm installnpm install --registry=registry.npm.taobao.org 下载并运行成功!

3.1.2 解决执行npm run dev或出现no module body-parser(安装body-parser即可)

npm intall body-parser

3.1.3 解决执行npm run dev或出现error:0308010C:digital envelope routines::unsupported(node版本过高导致,降低node版本、配置文件里设置永久生效,或终端执行命令单次生效)

症结所在:主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制,nodeJs v17之前版本没影响,但V17和之后版本会出现这个错误。

一句话总结,说白了就是npm升级导致与 openssl 不兼容导致的初始化失败,也就是node.js版本过高的原因造成的运行失败。

在这里插入图片描述

  • 永久生效(降低node版本至v16)
    – v16版本,点击下载
    一直下一步即可完成安装
# 加速镜像
npm config set registry https://registry.npm.taobao.org/
  • 临时生效(终端执行命令,单次生效)
// windows下
set NODE_OPTIONS=--openssl-legacy-provider
// linux下
export NODE_OPTIONS=--openssl-legacy-provider

3.1.3 启动demo

默认端口 9527
在这里插入图片描述
在这里插入图片描述

  • 清爽demo下载

http://www.ppmy.cn/news/81875.html

相关文章

Dockerfile的配置减小镜像文件大小

要编写一个能够使镜像文件最小化的 Dockerfile&#xff0c;可以考虑以下几个步骤和技巧&#xff1a; 选择合适的基础镜像&#xff1a;选择一个适合的基础镜像可以减小镜像的大小。常见的选择包括使用基于Alpine Linux的镜像&#xff0c;例如python:3.9-alpine&#xff0c;因为它…

删除Windows11和WIN10桌面图标小箭头

方法一: 1.右键“开始”菜单,找到“运行”,输入命令 regedit ,打开“注册表编辑器” 2.在“注册表编辑器”左侧窗口,按照以下路径找到对应项 HKEY_CLASSES_ROOT\lnkfile 3.选择右侧窗口的lsShortcut项,右击lsShortcut项,点击删除选项,将lsShortcut删除即可 4.重启电…

分布式事务的21种武器 - 4

在分布式系统中&#xff0c;事务的处理分布在不同组件、服务中&#xff0c;因此分布式事务的ACID保障面临着一些特殊难点。本系列文章介绍了21种分布式事务设计模式&#xff0c;并分析其实现原理和优缺点&#xff0c;在面对具体分布式事务问题时&#xff0c;可以选择合适的模式…

python简单爬虫爬取图片

python简单爬虫爬取图片 前言: 网络上的信息很多&#xff0c;有的时候我们需要关键字搜索才可以快速方便的找到我们需要的信息。今天我们实现搜索关键字爬取堆糖网上相关的美图&#xff0c;零基础学会通用爬虫&#xff0c;当然我们还可以实现多线程爬虫&#xff0c;加快爬虫爬取…

Swift 如何闪电般异步读取大文件?

功能需求 Apple 系统中(iOS、MacOS、WatchOS等等)读取文件是一个平常的不能再平常的需求,不过当文件很大时,同步读取文件会导致 UI 的挂起,这是不能让用户接受的。 所以,要想读取文件内容的同时保持界面操作丝般顺滑,只有使用异步文件读取技术来拯救我们了! 在本篇博…

【2023 · CANN训练营第一季】初识新一代开发者套件 Atlas 200I DK A2---章节小测微认证考试

微认证考试 1、以下不属于模型适配工具内置的模型的是&#xff1f; A. 目标检测模型 B. 图像分类模型 C. 语义分割模型 D. 关键点检测模型 C 2、模型适配工具安装前需要先安装&#xff1f; A. mobaXterm B. python3.9 C. Vscode D. Anaconda D 3、在哪个目录下可查看端…

那就别担心了(DFS优化)30行代码简单易懂

下图转自“英式没品笑话百科”的新浪微博 —— 所以无论有没有遇到难题&#xff0c;其实都不用担心。 博主将这种逻辑推演称为“逻辑自洽”&#xff0c;即从某个命题出发的所有推理路径都会将结论引导到同一个最终命题&#xff08;开玩笑的&#xff0c;千万别以为这是真正的逻辑…

Qt——Qt控件之显示窗口-QLCDNumber液晶数字控件的使用总结(例程:Qt液晶数显时钟表)

【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》 《QT开发实战》 《Android开发实战》