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

在这里插入图片描述

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

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

相关文章

BCD编码方案

1.BCD码的原理 BCD码(Binary-Coded Decimal)是一种用二进制数来编码十进制数字的方式。BCD码使用4位二进制数来表示一个十进制数的每一位。 2.8421码映射 8421码是BCD码的一种实例化。 01234567890000000100100011010001010110011110001001 因此132…

计算机网络基础(静态路由,动态路由,公网IP,私网IP,NAT技术)

文章目录 一:静态路由和动态路由二:静态路由的配置路由信息的方式演示三:默认路由四:公网IP和私网IP和NAT技术的基本理解 一:静态路由和动态路由 在说静态路由和动态路由前,我们需要来了解一下&#xff0…

【Windows】磁盘快捷修复

【Windows】磁盘快捷修复 1、背景2、关于Chkdsk3、示例 1、背景 前段时间使用U盘拷贝文件过程中,突然发现U盘无法读取了,U盘里面存储的数据也无法获取。 然后使用windows系统的chkdsk命令进行修复。 chkdsk全称:checkdisk,即磁盘…

【 Redis】的乱码问题

问题描述: 使用RedisTemplate存储的数据,在 redis-cli 客户端查看时,key 和 value 都会携带类似\xac\xad\这样的字符串。 原因: 由于默认使用了 jdk 的序列化方式。以下是支持的序列化方式 项目一般都会有缓存,常常…

go练习 day01

DTO: note_dto.go package dtoimport "king/model"type NoteAddDTO struct {ID uintTitle string json:"title" form:"title" binding:"required" message:"标题不能为空"Content string json:"conten…

Matlab实现AGNES算法

在数据分析和机器学习中,聚类是一种常用的无监督学习方法,它可以将数据点按照某种相似度标准进行分组,从而发现数据中的结构和模式。聚类算法有很多种,其中一种比较经典的是AGNES算法,它是一种基于层次的聚类算法&…

Live Market做世界C端用户数据的耕耘,数据和流量的价值呈现

在数字化时代,数据成为了推动经济增长和商业发展的重要资源,而流量则是数据价值的体现和传递媒介。随着全球互联网的普及和移动设备的智能化,C端用户数据的收集和分析变得尤为重要。在这个领域,有一家专注于世界C端用户数据耕耘的…

分享18个用于处理 null、NaN 和undefined 的 JS 代码片段

🎬 岸边的风:个人主页 🔥 个人专栏:《 VUE 》 《 javaScript 》 ⛺️生活的理想,就是为了理想的生活! 目录 前言 内容 📟 1. 检查是否为null: 📟 2. 检查undefined: &#x1…

【3D捏脸功能实现】

文章目录 一、技术方案介绍二、技术核心三、底层技术实现选型进行模型建模编写逻辑代码 四、功能落地五、总结 一、技术方案介绍 3D捏脸功能是一种利用3D技术实现用户自定义头像的功能。通常实现这种功能需要以下技术: 3D建模技术。通过3D建模技术可以创建一个可以…

【uniapp 样式】使用setStorageSync存储历史搜索记录

<template><view><view class"zhuangbox u-flex"><u--inputplaceholder"请输入关键字搜索"border"surround"shapecircleprefixIcon"search"prefixIconStyle"font-size: 22px;color: #909399"v-model&q…

Linux | VIM | 常用vim快捷键(建议收藏)

文章目录 Linux | VIM | 常用vim快捷键一、移动光标二、删除复制三、插入模式四、编辑五、查找替换六、退出编辑器七、多文件编辑八、多标签编辑九、执行shell命令十、VIM启动项十一、自动排版十二、如何在vim中编译程序十三、buffer操作buffer状态 十四、 VIM 操作目录1.打开目…

重新登录成功和登录失败处理器

<template><div class="login"><el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"><h3 class="title">Java1234 Vue3 后台管理系统</h3><el…

测试|LoadRunner安装及介绍

测试|LoadRunner安装及介绍 文章目录 测试|LoadRunner安装及介绍1.什么是LoadRunner2.LoadRunner特点3.LoadRunner基本概念4.LoadRunner三大组件之间关系LoadRunner安装1.安装包2.安装loadrunner 1.什么是LoadRunner LoadRunner是用来模拟用户负载完成性能测试的工具。 它适用…

重新理解 RocketMQ Commit Log 存储协议

最近突然感觉&#xff1a;很多软件、硬件在设计上是有 root reason 的&#xff0c;不是 by desgin 如此&#xff0c;而是解决了那时、那个场景的那个需求。一旦了解后&#xff0c;就会感觉在和设计者对话&#xff0c;了解他们的思路&#xff0c;学习他们的方法&#xff0c;思维…

Android Studio 关于BottomNavigationView 无法预览视图我的解决办法

一、前言&#xff1a;最近在尝试一步一步开发一个自己的软件&#xff0c;刚开始遇到的问题就是当我们引用 com.google.android.material.bottomnavigation.BottomNavigationView出现了无法预览视图的现象&#xff0c;我也在网上查了很多中解决方法&#xff0c;最后在执行了如下…

无涯教程-Lua - 简介

Lua是一种轻量语言&#xff0c;它的官方版本只包括一个精简的核心和最基本的库。这使得Lua体积小、启动速度快。它用ANSI C语言编写并以源代码形式开放&#xff0c;编译后仅仅一百余K&#xff0c;可以很方便的嵌入别的程序里。和许多“大而全”的语言不一样&#xff0c;网络通信…

pb:DDE客户函数

1、CloseChannel() 功 能:关闭先前用OpenChannel()函数打开的DDE服务器的通道。 语 法:CloseChannel ( handle {, windowhandle } ) 参 数:handle:long类型,通道句柄,指明要关闭的DDE通道; windowhandle:long类型,可选项,指明用做DDE客户的PowerBuilder窗口的…

一张表格讲明白white-space属性。html如何识别\n\r,让这些特殊换行符换行。

大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉&#xff0c;这的确大大的使得文本的排版更加美观了&#xff0c;也怎加了区域的利用率&#xff0c;可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢&#xff1f;…

vue3+ts+vite 引入静态资源require报错 ——解决方案

vue3中报错&#xff0c;导入reqire静态图片资源的时候&#xff0c;显示require不存在 require is not defined 发现是 在vite中不能使用require引入图片资源&#xff0c;因为这里的require是webpack提供的一种加载能力&#xff0c;由于我们使用的是Vite&#xff0c;因此这里必须…

在腾讯云服务器OpenCLoudOS系统中安装nginx(有图详解)

1. 创建安装目录 2. 下载、安装、编译 进入安装目录&#xff1a; cd /app/soft/nginx/ 下载&#xff1a; wget https://nginx.org/download/nginx-1.21.6.tar.gz 解压&#xff1a; tar -zxvf nginx-1.21.6.tar.gz 安装插件&#xff1a; yum -y install pcre-devel 安装…