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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...