当前位置: 首页 > news >正文

vue3搭建Arco design UI框架

技术:Vue3.2.40
UI框架:Arco design 2.44.7
需要安装:yarn 1.22.19 和npm 8.19.4

1.第一步安装本地全局arco脚手架

管理员运行CMD
在这里插入图片描述

npm i -g arco-cli

安装成功后如下:
在这里插入图片描述

2.第二步在需要存放项目的文件夹拉取项目

我这里把项目存放在 D:\Work\PrOjects\20230517\webui文件夹

cd D:\Work\PrOjects\20230517\webuiD:

在这里插入图片描述

3.使用命令选择项目配置

arco init hello-arco-pro

第一步:选择选项2,使用内部版(不要选择github登录版)
选项选择如下即可
在这里插入图片描述

4.第四步打开项目安装依赖

//安装依赖
yarn install
//运行项目
yarn run

在这里插入图片描述

5.登录

点击登录按钮登录(如果登录后页面报错,则请看下面
在这里插入图片描述

6.踩坑点

如果报错: error @arco-design/web-vue/es/table/interface type import should occur before import of @/hooks/loading import/order

则:调整下面顺序即可,正确顺序如下截图

在这里插入图片描述
如果报错:lodash相关的
则:调整下面顺序即可,正确顺序如下截图

在这里插入图片描述

我这边在.eslintrc.js文件新增了如下几个配置

 'no-underscore-dangle': 0,'no-console': 0,'no-plusplus': 0,

在这里插入图片描述

7.登录后进入首页预览图

在这里插入图片描述

8.文档

Arco Design地址:https://arco.design/vue/docs/pro/start
官方常见问题解决地址:https://arco.design/vue/docs/pro/faq

在这里插入图片描述

相关文章:

vue3搭建Arco design UI框架

技术:Vue3.2.40 UI框架:Arco design 2.44.7 需要安装:yarn 1.22.19 和npm 8.19.4 1.第一步安装本地全局arco脚手架 管理员运行CMD npm i -g arco-cli安装成功后如下: 2.第二步在需要存放项目的文件夹拉取项目 我这里把项目存放在 D:\W…...

提升数据质量的四大有效方式

在数字时代的今天,企业对于高质量、值得信赖的数据的需求越来越高。 目前,已经有很多企业将数据质量视为技术问题而非业务问题,这也是获取高质量数据的最大限制因素。只有查找技术缺陷,例如重复数据、缺失值、乱序序列&#xff0…...

ALLEGRO之FlowPlan

本文主要讲述了ALLEGRO的FlowPlan菜单。 (1)Auto Bundle:暂不清楚; (2)Create Bundle:暂不清楚; (3)Delete Bundle:暂不清楚; &…...

Python - OpenCV实现摄像头人脸识别(亲测版)

要使用Python 3和OpenCV进行摄像头人脸识别,您可以按照以下步骤进行操作: 0.安装OpenCV软件 去官网直接下载安装即可,如果是C使用OpenCV,需要使用编译源码并配置环境变量。 1.安装OpenCV库 在命令行中输入以下命令: pip inst…...

date日期相关操作汇总

一、若表中date字段存储形式为:2021-05-16 在表中找到2021年8月份数据的方法 方法1. like 语法:where date like 2021-08%; 前面能匹配上的就是2021年8月份。 方法2. year,month函数(mysql中有,oracle中不确定) 语法&…...

生产者-消费者模式

文章目录 一、生产者-消费者模式的应用场景1、Excutor任务执行框架:2、消息中间件active MQ:3、任务的处理时间比较长的情况下:二、生产者-消费者模式的优点1、优点:2、缺点:二、C++实现生产者-消费者模型1、依赖2、实现细节3、问题4、核心代码生产者-消费者模式是一个十分…...

Jetson Nano之ROS入门 -- YOLO目标检测与定位

文章目录 前言一、yolo板端部署推理二、目标深度测距三、目标方位解算与导航点设定1、相机成像原理2、Python实现目标定位 总结 前言 Darknet_ros是一个基于ROS(机器人操作系统)的开源深度学习框架,它使用YOLO算法进行目标检测和识别。YOLO算…...

【移动机器人运动规划】01 —— 常见地图基础 |图搜索基础

文章目录 前言相关代码整理:相关文章: 可视化网址:常用地图基础Occupancy grid mapOcto-mapVoxel hashingPoint cloud mapTSDF mapESDF mapFree-space RoadmapVoronoi Diagram Map 图搜索基础配置空间图搜索基本概念DijkstraAStarAstar的一些变种&#x…...

mongotop跟踪Mongodb集合读取和写入数据

版本控制 从 MongoDB 4.4 开始,MongoDB 数据库工具现在与 MongoDB 服务器分开发布,并使用自己的版本控制,初始版本为100.0.0. 此前,这些工具与 MongoDB 服务器一起发布,并使用匹配的版本控制。 兼容性 mongotop 版本…...

Linux中使用du命令来查看目录的大小

在Linux中,你可以使用du命令来查看目录的大小。下面是一些常用的du命令选项: -h:以人类可读的格式显示文件大小。-s:仅显示总大小,而不显示每个子目录的大小。-c:显示总大小,并在最后一行显示总…...

【Linux】进程篇Ⅰ:进程信息、进程状态、环境变量、进程地址空间

文章目录 一、概述二、查看进程信息1. 系统文件夹 /proc2. 用户级工具 ps3. getpid() 函数:查看进程 PID4. 用 kill 杀进程5. 进程优先级 二、进程状态分析0. 1. R (running) 运行状态2. S (sleeping) 休眠状态3. D (disk sleep) 不可中断的休眠状态4. T (stopped) …...

保护 TDengine 查询性能——3.0 如何大幅降低乱序数据干扰?

在时序数据库(Time Series Database)场景下,乱序数据的定义为:“时间戳(timestamp)不按照递增顺序到达数据库的数据。”虽然它的定义很简单,但时序数据库需要有相应的处理逻辑来保证数据存储时的…...

状态机实现N位按键消抖

状态机实现N位按键消抖 1、原理 利用状态机实现按键的消抖,具体的原理可参考 (50条消息) 基于FPGA的按键消抖_fpga 按键消抖_辣子鸡味的橘子的博客-CSDN博客 状态机简介: 状态机分类可以主要分为两类:moore和mealy 根据三段式状态机最后…...

uniapp自定义消息语音

需求是后端推送的消息APP要响自定义语音,利用官方插件,总结下整体流程 uniapp后台配置 因为2.0只支持uniapp自己的后台发送消息,所以要自己的后台发送消息只能用1.0 插件地址和代码 插件地址: link let isIos (plus.os.name "iOS&qu…...

k8s安装Jenkins

目录 ​编辑 一、环境准备 1.1 环境说明 二、安装nfs 2.1 安装NFS 2.2 创建NFS共享文件夹 2.3 配置共享文件夹 2.4 使配置生效 2.5 查看所有共享目录 2.6 启动nfs 2.7 其他节点安装nfs-utils 三、创建PVC卷 3.1 创建namespace 3.2 创建nfs 客户端sa授权 3.3 创建…...

共筑开源新长城 龙蜥社区走进开放原子校源行-清华大学站

6 月 28 日,以“聚缘于校,开源共行”为主题的 2023 年开放原子校源行活动在清华大学成功举行。本次活动由开放原子开源基金会和清华大学共同主办,来自各行业的 22 位大咖共聚校园共话开源。龙蜥社区技术专家边子政受邀进行技术分享&#xff0…...

Jgit 工具类 (代码检出、删除分支(本地、远程)、新建分支、切换分支、代码提交)

https://blog.csdn.net/qq_37203082/article/details/120327084 Jgit 工具类 (代码检出、删除分支&#xff08;本地、远程&#xff09;、新建分支、切换分支、代码提交)_jgit删除远程分支_CJ点的博客-CSDN博客 <!--JAVA操作GIT--><dependency><groupId>org.…...

什么是redux?如何在react 项目中使用redux?

redux 概念 redux是一种用于管理JavaScript应用程序的状态管理库。它可以与React、Augular、Vue等前端框架结合使用&#xff0c;但也可以纯在JavaScript应用程序中独立使用。redux遵循单项数据流的原则&#xff0c;通过一个全局的状态树来管理应用程序的状态&#xff0c;从而使…...

mysql的json处理

写在前面 需要注意&#xff0c;5.7以上版本才支持&#xff0c;但如果是生产环境需要使用的话&#xff0c;尽量使用8.0版本&#xff0c;因为8.0版本对json处理做了比较大的性能优化。你你可以使用select version();来查看版本信息。 本文看下MySQL的json处理。在正式开始让我们先…...

前端学习——Vue (Day8)

Vue3 create-vue搭建Vue3项目 注意要使用nodejs16.0版本以上&#xff0c;windows升级node可以西安使用where node查看本地node位置&#xff0c;然后到官网下载msi文件&#xff0c;在本地路径下安装即可 安装完可以使用node -v检查版本信息 项目目录和关键文件 组合式API - s…...

企业AI项目紧急叫停!DeepSeek许可证新增限制条款(2024.06.18生效)及72小时补救路径

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;DeepSeek许可证紧急变更事件全景速览 2024年7月12日&#xff0c;DeepSeek官方突然宣布对其开源模型系列&#xff08;包括DeepSeek-V2、DeepSeek-Coder、DeepSeek-MoE等&#xff09;的许可证进行紧急修订&#…...

AI大神Karpathy的学习心法,普通人也能直接抄作业

美国时间2026年5月19日&#xff0c;AI 圈被一条重磅消息刷屏&#xff1a;大牛 Andrej Karpathy 在社交媒体上正式宣布加入 Anthropic。对于整个科技圈而言&#xff0c;他的动向影响力堪比当年乔丹宣布重返 NBA 大联盟 。这一次&#xff0c;他加入了 Anthropic 的预训练团队&…...

Kubernetes节点管理:管理集群节点的关键策略

Kubernetes节点管理&#xff1a;管理集群节点的关键策略 一、Kubernetes节点管理概述 1.1 节点管理的定义 Kubernetes节点管理是指对集群中节点的生命周期进行管理的过程&#xff0c;包括节点的加入、配置、监控、维护和退出。它确保集群中的节点能够高效、可靠地运行工作负载。…...

5分钟快速激活Cursor Pro:突破AI编程助手的终极破解方案

5分钟快速激活Cursor Pro&#xff1a;突破AI编程助手的终极破解方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your t…...

监区越界预警技术革命:基于纯视觉无感全域风控体系,重构智慧监所时空管控范式

监区越界预警技术革命&#xff1a;基于纯视觉无感全域风控体系&#xff0c;重构智慧监所时空管控范式当前国内智慧监所越界预警领域&#xff0c;传统管控方案高度依赖UWB超宽带单点定位技术&#xff0c;整体技术架构以硬件堆叠为核心&#xff0c;依托标签穿戴、单点锚定、局部电…...

深入解析Linux内核sk_buff内存布局与核心操作原理

1. 项目概述&#xff1a;从数据包到sk_buff的旅程在网络编程和内核开发领域&#xff0c;sk_buff&#xff08;socket buffer&#xff09;是一个绕不开的核心数据结构。它就像网络数据包在内核世界里的“标准集装箱”&#xff0c;负责承载从网卡接收到应用层发送的每一份数据。无…...

Claude CLI 缓存陷阱:为什么用第三方模型时 token 会暴涨 10 倍?

一个开发者的真实经历 上周,我收到一位朋友的微信: “我用 Claude Code 接 DeepSeek API,明明代码没怎么变,token 消耗却突然涨了好几倍,一天就把额度用完了。” 这个情况不是个例。在 GitHub 上,至少有 80 多个相关 issue,核心问题都指向同一个点——Claude CLI 默认…...

Chrome二维码插件:跨设备链接传输的智能解决方案

Chrome二维码插件&#xff1a;跨设备链接传输的智能解决方案 【免费下载链接】chrome-qrcode :zap: A Chrome plugin to Genrate QRCode of URL / Text, or Decode the QRcode in website. 一个Chrome浏览器插件&#xff0c;用于生成当前URL或者选中内容的二维码&#xff0c;同…...

如何快速掌握Subtitle Edit:免费开源字幕编辑器的终极指南

如何快速掌握Subtitle Edit&#xff1a;免费开源字幕编辑器的终极指南 【免费下载链接】subtitleedit the subtitle editor :) 项目地址: https://gitcode.com/gh_mirrors/su/subtitleedit 想要为视频添加专业字幕却苦于找不到合适的工具&#xff1f;Subtitle Edit作为一…...

惠普tank 2606屏幕显示 er-08 ,加了粉还是报错er08,黄灯闪烁成像鼓接近寿命期限?亲测完美修复。

下载&#xff1a;点这里下载 备用下载&#xff1a;https://pan.baidu.com/s/1J7PN4m4fbIzku9DqBFg_nw?pwd0000...