当前位置: 首页 > 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…...

OpenCore Legacy Patcher:让旧Mac重获新生的终极指南

OpenCore Legacy Patcher&#xff1a;让旧Mac重获新生的终极指南 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher OpenCore Legacy Patcher是一款革命性的开源…...

深蓝词库转换终极指南:30+输入法格式一键互转教程

深蓝词库转换终极指南&#xff1a;30输入法格式一键互转教程 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 深蓝词库转换&#xff08;imewlconverter&#xff09;是…...

ANSYS模态分析后,如何用MATLAB把导出的HB格式刚度矩阵变回普通矩阵?(附完整命令流)

ANSYS模态分析后HB格式刚度矩阵的MATLAB转换全流程解析 在结构动力学和有限元分析领域&#xff0c;ANSYS与MATLAB的协同工作已经成为科研人员和工程师的标配工作流。模态分析作为结构动态特性研究的基础&#xff0c;其刚度矩阵的导出与后续处理尤为关键。然而&#xff0c;当您从…...

SeqGPT-560M智能客服问答系统部署指南

SeqGPT-560M智能客服问答系统部署指南 1. 引言 想象一下这样的场景&#xff1a;你的电商平台每天收到上千条客户咨询&#xff0c;从"这个衣服有货吗"到"怎么申请退货"&#xff0c;问题五花八门。传统客服需要一个个手动回复&#xff0c;效率低下还容易出…...

如何用anyRTC-RTMP-OpenSource打造个性化直播数据源:自定义视频采集完整指南

如何用anyRTC-RTMP-OpenSource打造个性化直播数据源&#xff1a;自定义视频采集完整指南 【免费下载链接】anyRTC-RTMP-OpenSource RTMP 推流器&#xff0c;RTMP(HLS)秒开播放器&#xff0c;直播点播&#xff0c;跨平台&#xff08;Win,IOS,Android&#xff09;开源代码 项目…...

OpCore-Simplify:黑苹果配置的自动化革命——从复杂调试到一键配置的智能解决方案

OpCore-Simplify&#xff1a;黑苹果配置的自动化革命——从复杂调试到一键配置的智能解决方案 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 传统黑苹…...

单片机:从核心原理到智能应用实战

1. 单片机&#xff1a;智能时代的微型大脑 想象一下清晨醒来&#xff0c;窗帘自动拉开&#xff0c;咖啡机开始工作&#xff0c;室内温度始终保持在最舒适的状态——这些看似简单的智能场景背后&#xff0c;都藏着一个不起眼却至关重要的核心部件&#xff1a;单片机。这块比硬币…...

Pencil原型工具全攻略:从环境搭建到高级配置

Pencil原型工具全攻略&#xff1a;从环境搭建到高级配置 【免费下载链接】pencil DEPRECATED: Multiplatform GUI Prototyping/Wireframing 项目地址: https://gitcode.com/gh_mirrors/pen/pencil Pencil原型工具&#xff1a;开源价值定位与核心特性解析 核心价值&…...

效率翻倍,一键生成企业级vue3+ts+pinia项目脚手架,告别重复环境配置

最近在搭建一个企业级中后台管理系统时&#xff0c;发现从零开始配置Vue3项目环境特别耗时。传统方式需要手动安装各种依赖、配置代码规范、设计目录结构&#xff0c;经常因为版本兼容问题卡住半天。后来尝试用InsCode(快马)平台生成项目脚手架&#xff0c;效率直接翻倍&#x…...

Hunyuan-MT-7B保姆级教程:Pixel Language Portal在树莓派5上的轻量级翻译终端部署

Hunyuan-MT-7B保姆级教程&#xff1a;Pixel Language Portal在树莓派5上的轻量级翻译终端部署 1. 项目介绍与核心价值 Pixel Language Portal&#xff08;像素语言跨维传送门&#xff09;是一款基于Tencent Hunyuan-MT-7B大语言模型的创新翻译工具。与传统翻译软件不同&#…...