群控系统服务端开发模式-应用开发-前端框架

        前端我这里采用的是vue-element-admin框架。

一、下载地址

        1、官方地址

https://panjiachen.github.io/vue-element-admin-site/zh/

        2、下载地址

https://github.com/PanJiaChen/vue-element-admin

        3、下载方式

                a、git工具下载

                b、源码直接下载

二、目录结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

三、安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git# 进入项目目录
cd front-end-frame# 安装依赖
npm install# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com# 如果遇到bug的情况下,请采用下面命令清理
npm cache clean --force# 启动服务
npm run dev

四、注意事项

        1、报错提示

npm ERR! Error while executing:
npm ERR! D:\Git\cmd\git.EXE ls-remote -h -t https://github.com/nhn/raphael.git
npm ERR!
npm ERR! fatal: unable to connect to github.com:
npm ERR! github.com[0: 20.205.243.166]: errno=Unknown error

        2、处理方案

                删除根目录下package.json文件中的tui-editor依赖参数。

        3、操作步骤

                a、删除根目录下package.json文件中的tui-editor依赖参数。

  "dependencies": {"axios": "0.18.1","clipboard": "2.0.4","codemirror": "5.45.0","core-js": "3.6.5","driver.js": "0.9.5","dropzone": "5.5.1","echarts": "4.2.1","element-ui": "2.13.2","file-saver": "2.0.1","fuse.js": "3.4.4","js-cookie": "2.2.0","jsonlint": "1.6.3","jszip": "3.2.1","normalize.css": "7.0.0","nprogress": "0.2.0","path-to-regexp": "2.4.0","screenfull": "4.2.0","script-loader": "0.7.2","sortablejs": "1.8.4","vue": "2.6.10","vue-count-to": "1.0.13","vue-router": "3.0.2","vue-splitpane": "1.0.4","vuedraggable": "2.20.0","vuex": "3.1.0","xlsx": "0.14.1"},

                b、安装依赖

npm install --registry=https://registry.npmmirror.com

                c、启动服务

npm run dev

                d、删除不必要的文件

 ERROR  Failed to compile with 3 errors                                                                                                                                                                                     10:20:47These dependencies were not found:* tui-editor in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/MarkdownEdit
or/index.vue?vue&type=script&lang=js
* tui-editor/dist/tui-editor-contents.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!
./src/components/MarkdownEditor/index.vue?vue&type=script&lang=js
* tui-editor/dist/tui-editor.css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/com
ponents/MarkdownEditor/index.vue?vue&type=script&lang=jsTo install them, you can run: npm install --save tui-editor tui-editor/dist/tui-editor-contents.css tui-editor/dist/tui-editor.css

                第一步:找到根目录下src文件夹下的components文件夹下MarkdownEditor文件夹并删除该文件夹;第二步:找到根目录下src文件夹下的views文件夹下components-demo文件夹下markdown.vue文件并删除该文件;第三步:找到根目录下src文件夹下router文件夹下modules文件夹下components.js文件,找到markdown代码;第四步:就是就运行成功;代码如下:

第三步需要删除的代码
{path: 'markdown',component: () => import('@/views/components-demo/markdown'),name: 'MarkdownDemo',meta: { title: 'Markdown' }
},
第四步运行成功的代码
98% after emitting CopyPluginDONE  Compiled successfully in 255ms                                                                                                                                                                                       10:30:09App running at:- Local:   http://localhost:9527/- Network: http://192.168.0.4:9527/Note that the development build is not optimized.To create a production build, run npm run build.

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

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

相关文章

【RMA】基于知识注入和模糊学习的多模态歧义分析

abstract 多模态情感分析(MSA)利用互补的多模态特征来预测情感极性,主要涉及语言、视觉和音频三种模态。现有的多模态融合方法主要考虑不同模态的互补性,而忽略了模态之间的冲突所导致的歧义(即文本模态预测积极情绪&…

移动取证和 Android 安全

当今的数字时代已经产生了许多技术进步,无论是智能手机还是虚拟现实、人工智能和物联网 (IoT) 等下一代基础技术。 智能手机已不再只是奢侈品,而是我们生存所必需的东西。根据各种统计数据,如今全球有超过 50% 的人使用手机。 由于数据存储…

【Linux】简易版shell

文章目录 shell的基本框架PrintCommandLineGetCommandLineParseCommandLineExecuteCommandInitEnvCheckAndExecBuildCommand代码总览运行效果总结 shell的基本框架 要写一个命令行我们首先要写出基本框架。 打印命令行获取用户输入的命令分析命令执行命令 基本框架的代码&am…

Java 枚举

目录 枚举是什么 常用方法 构造方法 枚举的优缺点 枚举和反射 实现单例模式 枚举是什么 枚举(enum):是一种特殊的类,用于定义一组常量,将其组织起来。枚举使得代码更具有可读性和可维护性,特别是在处…

【梯度下降法优化】随机梯度下降、牛顿法、动量法、Nesterov、AdaGrad、RMSprop、Adam

本文理论参考王木头的视频: “随机梯度下降、牛顿法、动量法、Nesterov、AdaGrad、RMSprop、Adam”,打包理解对梯度下降法的优化_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1r64y1s7fU/?spm_id_from333.999.0.0&vd_sourceecbdfcacb078d0…

五个高质量伤感视频素材资源站,帮你快速找到完美创作素材

在制作短视频、MV或者广告时,伤感主题的视频素材往往能触动观众的情感,让作品更具共鸣。无论是表达分手、离别,还是展现孤独与失落,合适的伤感素材对情感类创作至关重要。为帮助创作者找到优质的视频素材,以下推荐5个高…

天正建筑T20V8

链接: https://pan.baidu.com/s/1k-PcXJxHWPh3-6yAIfcaPg提取码: dvyn

JavaScript 实现文本转语音功能

全篇大概2000 字(含代码),建议阅读时间10分钟。 引言 我将向大家展示如何使用 JavaScript 和 Web Speech API 快速实现一个“文本转语音”的 Web 应用。通过这个教程,你将了解如何让浏览器将输入的文本朗读出来。 预览效果 一、…

DNS域名详细解析详解

文章目录 DNS域名详细解析详解一、引言二、DNS域名解析过程1、DNS解析概述1.1、DNS解析的基本步骤 2、代码示例 三、DNS查询类型1、递归查询2、迭代查询 四、总结 DNS域名详细解析详解 一、引言 在互联网的世界里,域名和IP地址是两个不可或缺的概念。IP地址是计算…

函数计算——文档与网页数据提取工具(MinerU)应用实践

1 引言 在信息爆炸的时代,AI研究者面临着从海量文档中提取高质量数据的挑战。随着大语言模型在各个领域的广泛应用,有效地处理和整合文档信息成为了基础性的任务。这些文档形式多样,包括学术文献、行业报告、会议PPT、课本、说明书及合同单据…

【网络】应用层——HTTP协议

> 作者:დ旧言~ > 座右铭:松树千年终是朽,槿花一日自为荣。 > 目标:了解什么是HTTP协议。 > 毒鸡汤:有些事情,总是不明白,所以我不会坚持。早安! > 专栏选自:网络 &g…

计算生物学与生物信息学漫谈-5-mapping算法

之前的文章我们介绍了参考基因组,也介绍了一些基本概念,具体可以看之前的博客: 计算生物学与生物信息学漫谈-4-参考基因组与Mapping准备_基因组的map-CSDN博客 这次我们讲如何将read map到基因组上所用到的各种算法: 目录 1.1 …

qsqlmysql.lib的编译和使用

文章目录 打开源码 打开源码 打开qt源码安装路径 src相对路径下的文件Src\qtbase\src\plugins\sqldrivers\mysql 比如我是5.9.9版本我的路径就是:D:\Qt5.9.9\5.9.9\Src\qtbase\src\plugins\sqldrivers\mysql 可以看到待编译的mysql驱动文件 使用IDE打开pro文件进…

leetcode 693.交替位二进制数

1.题目要求&#xff1a; 2.题目代码: class Solution { public:bool hasAlternatingBits(int n) {int num n;//设置数组存入二进制位vector<int> array;while(num){array.push_back(num % 2); num num / 2;}//把数组颠倒就能得到此数真正二进制位reverse(array.begin…

IP协议知识点总结

IP协议主要分为三个 1. 地址管理 每个网络上的设备, 要能分配一个唯一的地址 2. 路由选择 小A 给小B 发消息, 具体应该走什么路线 3. 地址管理 IP 地址. 本质上是一个 32 位的整数 通常将, 32 位的整数使用点分十进制来表示, 如 192.168.1.1 一共可以表示 42 亿 9 千万个地址…

【重学 MySQL】八十二、深入探索 CASE 语句的应用

【重学 MySQL】八十二、深入探索 CASE 语句的应用 CASE语句的两种形式CASE语句的应用场景数据分类动态排序条件计算在 SELECT 子句中使用在 WHERE子句中使用在 ORDER BY 子句中使用 注意事项 在MySQL中&#xff0c;CASE 语句提供了一种强大的方式来实现条件分支逻辑&#xff0c…

机器学习1_机器学习定义——MOOC

一、机器学习定义 定义一 1959年Arthur Samuel提出机器学习的定义&#xff1a; Machine Learning is Fields of study that gives computers the ability to learn without being explicitly programmed. 译文&#xff1a;机器学习是这样的领域&#xff0c;它赋予计算机学习的…

充电桩--OCPP 充电通讯协议介绍

一、OCPP协议介绍 OCPP的全称是 Open Charge Point Protocol 即开放充电点协议&#xff0c; 它是免费开放的协议&#xff0c;该协议由位于荷兰的组织 OCA&#xff08;开放充电联盟&#xff09;进行制定。Open Charge Point Protocol (OCPP) 开放充电点协议用于充电站(CS)和任何…

如何制作公司小程序

我是【码云数智】平台的黄导&#xff0c;今天分享&#xff1a;如何制作公司小程序 企业小程序怎么制作&#xff0c;企业小程序制作不仅成为了连接消费者与品牌的桥梁&#xff0c;更是企业数字化转型的重要一环。 01、小程序制作流程 02、微信小程序开发多少钱 03、微信小程…

明道云正式发布国际品牌Nocoly

在2024年明道云伙伴大会上&#xff0c;明道云正式发布了其国际品牌Nocoly以及国际版产品Nocoly HAP。这标志着公司正式开启了海外业务。明道云的海外业务由全资拥有的Nocoly.com Limited经营&#xff0c;该公司注册在香港特别行政区。总部位于上海的明道云已经将围绕HAP超级应用…