vue3搭建Arco design UI框架

news2024/11/18 2:34:47

技术: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\webui

D:

在这里插入图片描述

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

在这里插入图片描述

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

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

相关文章

CTF:信息泄露.(CTFHub靶场环境)

CTF:信息泄露.(CTFHub靶场环境) “ 信息泄露 ” 是指网站无意间向用户泄露敏感信息,泄露了有关于其他用户的数据,例如:另一个用户名的财务信息,敏感的商业 或 商业数据 ,还有一些有…

【枚举+结论】icpc2022 济南 A

Problem - A - Codeforces 题意: 思路: 本来的思路是这样的 考虑最后会变成什么数,手摸了几个发现,都是2,不论本来的集合是不是包含2 然后就是猜测是不是直接变成2就好了 然后要去掉m个,直接考虑去掉最…

高速过孔同进同出?到底是什么一种设计体验

高速先生成员--黄刚 每当来一个比较新的概念时,高速先生总是非常的喜欢,随之而来的求知欲也会爆发个小宇宙。其实问题的来源是我们公司的北京分部的资深设计工程师,北京分部本身也是我司全国20多个分部里设计能力最强的分部之一了&#xff0c…

类的封装和包(JAVA)

封装 所有的OOP语言都会有三个特征: 封装;继承;多态。 本篇文章会为大家带来有关封装的知识。 在我们日常生活中可以看到电视就只有那么几个按键(开关,菜单……)和一些接口,而而我们通过这些东…

Day08-作业(MySQLMybatis入门)

作业1:多表查询 数据准备: 重新创建一个数据库 db03_homework 执行如下脚本,创建表结构,导入测试数据 -- 部门管理 create table tb_dept(id int unsigned primary key auto_increment comment 主键ID,name varchar(10) not n…

想了解好用的翻译pdf的软件吗?

在全球化的时代背景下,跨国贸易越来越普遍,跨语言沟通也越来越频繁。小黄是一家跨国公司的员工,他梦想能在全球各地拓展自己的业务,奈何遇到了一个巨大的挑战:跨语言沟通。在这其中,pdf文件是他经常接收到的…

CNN-NER论文详解

论文:https://arxiv.org/abs/2208.04534 代码:https://github.com/yhcc/CNN_Nested_NER/tree/master 文章目录 有关工作前期介绍CNN-NER模型介绍 代码讲解主类多头biaffineCNNLoss解码数据传入格式 参考资料 有关工作 前期介绍 过去一共主要有四类方式…

基于canvas画布的实用类Fabric.js的使用

目录 前言 一、Fabric.js简介 二、开始 1、引入Fabric.js 2、在main.js中使用 3、初始化画布 三、方法 四、事件 1、常用事件 2、事件绑定 3、事件解绑 五、canvas常用属性 六、对象属性 1、基本属性 2、扩展属性 七、图层层级操作 八、复制和粘贴 1、复制 2…

高并发架构去重难?架构必备技能 - 布隆过滤器

系列文章目录 当Dubbo遇到高并发:探究流量控制解决方案 主从选举机制,架构高可用性的不二选择 高并发架构去重难?架构必备技能 - 布隆过滤器 系列文章目录前言一、布隆过滤器简介二、特性与应用场景三、参数定制四、java版本的Demo五、总结 …

安全学习DAY13_WEB应用源码获取

信息打点-WEB应用-源码获取 文章目录 信息打点-WEB应用-源码获取小节概述-思维导图资产架构-源码获取(后端)后端-开源后端-闭源-源码泄露源码泄露原因源码泄露方式集合网站备份压缩包git,svn源码泄露DS_Store文件泄露composer.json 泄露资源搜…

网络安全 Day24-select高级用法和多表连接

select高级用法和多表连接 1. select 多子句单表高级实践1.1 select 多子句高级语法1.2 聚合函数1.3 group by 实践1.4 having 筛选1.5 order by 排序1.6 limit 2. 多表连接 1. select 多子句单表高级实践 1.1 select 多子句高级语法 where 和 having 区别是后者是分组后进行…

计算机视觉实验:人脸识别系统设计

实验内容 设计计算机视觉目标识别系统,与实际应用有关(建议:最终展示形式为带界面可运行的系统),以下内容选择其中一个做。 1. 人脸识别系统设计 (1) 人脸识别系统设计(必做):根据…

【iOS】Cydia Impactor 错误:file http.hpp; line:37; what: _assert(code == 200)

Cydia Impactor 报错,信息如下 file http.hpp; line:37; what: _assert(code 200)解决方案:Cydia Impactor 已被弃用,切换到sideloadly 即可,亲测成功,并且支持双重验证登录 csdn备份地址 HERE

kotlin 编写一个简单的天气预报app(四)增加界面显示

编写界面来显示返回的数据 用户友好性&#xff1a;通过界面设计和用户体验优化&#xff0c;可以使天气信息更易读、易理解和易操作。有效的界面设计可以提高用户满意度并提供更好的交互体验。 增加城市名字的TextView <TextViewandroid:id"id/textViewCityName"…

华为OD机试 Java 实现【批量处理任务】【2023 B卷 200分】,二分查找

目录 专栏导读一、题目描述二、输入描述三、输出描述四、二分查找五、解题思路六、Java算法源码七、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;…

SPSS常见图表一览

SPSS是一个统计分析软件&#xff0c;而不是可视化分析工具&#xff0c;它输出的图表主要便于我们更好的理解输出结果&#xff0c;了解数据的基本分布形态。 因此&#xff0c;SPSS中的图表并不复杂&#xff0c;但不能说不重要&#xff0c;我们不需要花费太多时间深究&#xff0…

Postgresql源码(109)并行框架实例与分析

1 PostgreSQL并行参数 系统参数 系统总worker限制&#xff1a;max_worker_processes 默认8 系统总并发限制&#xff1a;max_parallel_workers 默认8 单Query限制&#xff1a;max_parallel_workers_per_gather 默认2 表参数限制&#xff1a;parallel_workers alter table tbl …

什么是 DNS ANAME 解析?

本人使用谷歌搜索了简中互联网&#xff0c;完全没有找到任何有关 ANAME 的文章……本文该不会是头一份吧 相信大家对于 DNS 的解析方式都不陌生&#xff0c;常见的有 A、CNAME、MX、TXT 记录等等。其中&#xff0c;网站常用的是 A 记录和 CNAME 记录&#xff1a;A 记录用于将域…

SQL Developer中的Active Data Guard

这篇文章 Display Data Guard configuration in SQL Developer 中&#xff0c;用SQL Developer展示了多种ADG的拓扑。 今天自己也试了一下&#xff0c;还蛮简单的&#xff0c;其实最麻烦的部分在于搭建一个ADG环境。 假设我已有一个ADG环境&#xff0c;即最典型的环境&#x…

数据库事务--数据库事务基本概念

2、认识事务 2.1、为什么需要事务 如何解决呢 使用事务 2.2、什么是事务 事务的概念: 数据库事务是访问并可能更新数据库中各种数据项的一个程序执行单元 事务的组成: 一个数据库事务通常包含对数据库进行读或写的的一个操作序列 事务的相关特性: 数据库事务可以包含一个或多…