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

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?

系列回顾&#xff1a; 在上一篇《React核心概念&#xff1a;State是什么&#xff1f;》中&#xff0c;我们学习了如何使用useState让一个组件拥有自己的内部数据&#xff08;State&#xff09;&#xff0c;并通过一个计数器案例&#xff0c;实现了组件的自我更新。这很棒&#…...