vue3的福音框架arco.design
前言:
在vue2于2023年底正式宣布不在维护,vue3使用越来越频繁的时刻,我们实现项目的辅助框架也越来越多。element, iview, antd 等经典框架继续风靡一时,不过也有很多好的框架,功能也强大,比如我们今天说的主角 arco.design ,他是字节跳动的产品,从2022到今天,经历了时间的检验,他的ui性能,功能的扩展都是很强大的,这里说说他的使用。
界面截图:

1、官网入口,web端,移动端的框架目前只支持react,有兴趣的可以点我去查看
点我
https://arco.design/vue/docs/start
2、arco.design 于 ant.desig的 区别
- Ant Design(简称:antd) 是由阿里巴巴集团自研并开源的企业级 UI 设计语言和 React 组件库,被广泛应用在阿里集团内外多个大型项目中。
- Arco Design 则是由字节跳动公司研发并开源的企业级设计体系和React组件库,它旨在解决字节内部的各种UI定制化需求,同时对外提供给社区使用。
尽管两者在基础功能上有一定的重叠,但各自在设计理念、细节处理、社区支持等方面都有所不同。选择哪一个取决于项目的具体需求、团队对设计风格的偏好以及技术栈的兼容性考量。
个人使用理解:
arco 的ui样式更加年轻化,他的组件功能也更加强大,把一部分常用的功能都暴露处理,相比较传统的antd,优势还是很明显的
3、arco.design的使用
安装
# npm
npm install --save-dev @arco-design/web-vue
# yarn
yarn add --dev @arco-design/web-vue
完整引入
import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');
更多操作:
Arco Design Vue
https://arco.design/vue/docs/start
国际化:
<template><a-config-provider :locale="enUS">//在这里放入你的组件,或者router-view<a-pagination :total="50" show-total show-jumper show-page-size /></a-config-provider>
</template><script>
import enUS from '@arco-design/web-vue/es/locale/lang/en-us'; //英文
import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn'; //中文
import zhTW from '@arco-design/web-vue/es/locale/lang/zh-tw'; //中文-繁体
import jaJP from '@arco-design/web-vue/es/locale/lang/ja-JP'; //日文
...</script>
支持的地区语言
| 语言 | 地区编码 |
|---|---|
| 简体中文 | zh-CN |
| 英文 | en-US |
| 日文 | ja-JP |
| 繁体中文(中国台湾) | zh-TW |
| 葡萄牙语 | pt-PT |
| 西班牙语 | es-ES |
| 印度尼西亚语 | id-ID |
| 法语(法国) | fr-FR |
| 德语(德国) | de-DE |
| 韩语 | ko-KR |
| 意大利语(意大利) | it-IT |
| 马来语(马来西亚) | ms-MY |
| 泰语 | th-TH |
| 越南语 | vi-VN |
| 高棉语(柬埔寨) | km-KH |
| 阿拉伯语(埃及) | ar-EG |
4、案例项目:Arco Pro
Arco Design Vue
https://arco.design/vue/docs/pro/start
相关文章:
vue3的福音框架arco.design
前言: 在vue2于2023年底正式宣布不在维护,vue3使用越来越频繁的时刻,我们实现项目的辅助框架也越来越多。element, iview, antd 等经典框架继续风靡一时,不过也有很多好的框架,功能也强大,比如我们今天说的…...
BSP视频教程第29期:J1939协议栈CAN总线专题,源码框架,执行流程和应用实战解析,面向车通讯,充电桩,模组通信等(2024-01-08)
视频教程汇总帖:【学以致用,授人以渔】2024视频教程汇总,DSP第12期,ThreadX第9期,BSP驱动第29期,USB实战第5期,GUI实战第3期(2024-01-08) - STM32F429 - 硬汉嵌入式论坛 …...
Java lambda表达式如何自定义一个toList Collector
匿名类: package l8;import java.util.*; import java.util.function.BiConsumer; import java.util.function.BinaryOperator; import java.util.function.Function; import java.util.function.Supplier; import java.util.stream.Collector; import java.util.s…...
【hcie-cloud】【18】华为云Stack灾备服务介绍【容灾解决方案介绍、灾备方案架构介绍、管理组件灾备方案介绍、高阶云服务容灾简介、缩略词】【下】
文章目录 灾备方案概述、备份解决方案介绍容灾解决方案介绍华为云容灾解决方案概览云容灾服务云硬盘高可用服务 (VHA)VHA组网结构VHA逻辑组网架构VHA管理组件介绍VHA服务实现原理云服务器高可用服务(CSHA)CSHA物理组网架构CSHA逻辑组网架构CSHA服务组件间…...
linux建立软链接——以matlab为例
如果软件没有建立软连接,每次打开terminal就只是个黑黑的窗口,每次打开软件都要自己load一次,比较麻烦。 第一步: 在工作夹新建文档:project.cshrc 第二步: 在夹新建文档中写入:module laod m…...
ubuntu20固定串口名称
查看串口的详细信息 udevadm info --name/dev/ttyUSB0结果: P: /devices/platform/scb/fd500000.pcie/pci0000:00/0000:00:00.0/0000:01:00.0/usb1/1-1/1-1.2/1-1.2:1.0/ttyUSB0/tty/ttyUSB0 N: ttyUSB0 L: 0 S: serial/by-id/usb-Silicon_Labs_CP2102_USB_to_UAR…...
扩散模型(二)——DDIM学习笔记-大白话推导
扩散模型系列: (1)扩散模型(一)——DDPM推导笔记-大白话推导 (2)扩散模型(二)——DDIM学习笔记-大白话推导 请提前关注,后续待更新,谢谢… 写在前面: (1)建议…...
【软件测试作业_TPshop商城】农业工程学院-测试需求分析与测试计划+自动化+性能+测试用例+报告软件缺陷+测试计划+单元测试+系统测试
1测试需求分析与测试计划 1.1 被测系统简介 1.2测试需求分析 1.2.1单元测试层面的测试需求分析 1.2.2系统测试层面的测试需求分析 1.3测试计划 1.31测试范围与任务 1.3.2 测试环境 1.3.3测试进度安排 测试用例的设计2 2.1单元测试层面的测试用例设计 2.2系统测试层面的测试用例…...
屏幕截图编辑工具Snagit中文
Snagit是一款优秀的屏幕、文本和视频捕获与转换程序。它能够捕获屏幕、窗口、客户区窗口、最后一个激活的窗口或用鼠标定义的区域,并支持BMP、PCX、TIF、GIF或JPEG格式的保存。Snagit还具有自动缩放、颜色减少、单色转换、抖动等功能,并能将捕获的图像转…...
12GoF之代理模式
解决问题的思维:AOP 解决问题技术:代理技术 代理技术太麻烦,因此使用框架 Spring AOP框架(底层是代理技术:jdk动态daili,cglib) 代理模式是GoF23种设计模式之一。属于结构型设计模式。 代理…...
Unity中URP下实现能量罩(扭曲流光花纹)
文章目录 前言一、能量罩花纹1、在属性面板接收能量罩花纹纹理2、申明 纹理 和 采样器3、在顶点着色器,应用 Tilling 和 Offset4、在片元着色器,纹理采样后,与之前的结果相乘输出 二、能量罩流光1、在顶点着色器,记录原uv值2、在片…...
南京银行高管上新:“70后董事长”谢宁将上任,能否及时救场?
撰稿|行星 来源|贝多财经 2024年上市银行的首例“换帅”事件,由南京银行拉开帷幕。 1月8日,南京银行(SH:601009)发布公告称,该行2024年第一次临时股东大会选举产生了第十届董事会11名董事,同意选举谢宁担…...
K8S容器编排基本使用
Kubernetes容器编排技术基本使用 1.部署模式发展历程 物理单机 – 虚拟机(VMware)-- IAAS(基础设施即服务 比如够买jsp主机模式)-- OPENSTACK(多个机器分片使用思想)-- docker(容器化…...
PyTorch 各种池化层函数全览与用法演示
目录 torch.nn.functional子模块Pooling层详解 avg_pool1d 用法与用途 参数 注意事项 示例代码 avg_pool2d 用法与用途 参数 注意事项 示例代码 avg_pool3d 用法与用途 参数 注意事项 示例代码 max_pool1d 用法与用途 参数 注意事项 示例代码 max_pool2d…...
Redis:原理速成+项目实战——Redis实战7(优惠券秒杀+细节解决超卖、一人一单问题)
👨🎓作者简介:一位大四、研0学生,正在努力准备大四暑假的实习 🌌上期文章:Redis:原理速成项目实战——Redis实战6(封装缓存工具(高级写法)&&缓存总…...
【刷题笔记3】
笔记3 输出小数位数控制。(自动四舍五入,不够就自动补0) double a123.456; cout<<fixed<<setprecision(2)<<a;递归题目的记录 (1):n*m的棋盘格子(n为横向的格子数…...
YOLOv8优化策略:轻量化改进 | 华为Ghostnet,超越谷歌MobileNet | CVPR2020
🚀🚀🚀本文改进:Ghost bottleneck为堆叠Ghost模块 ,与YOLOV8建立轻量C2f_GhostBottleneck 🚀🚀🚀YOLOv8改进专栏:http://t.csdnimg.cn/hGhVK 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; 1.Ghostnet介绍 论文: https://arxiv.org/pdf/1911.11907.…...
格雷希尔G65系列快速接头满足汽车减震器的气压、油压测试要求
当汽车经过不平路面时,汽车减震器可以抑制弹簧吸震后因反弹带来的震荡和来自路面的冲击,为乘客带来平稳舒适的行车体验。减震器在出厂之前,需要模拟汽车的真实行驶环境,在模拟当中需要对它们进行气压和油压的轮番测试。 客户的测试…...
php中常用的几个安全函数
1. mysql_real_escape_string() 这个函数对于在PHP中防止SQL注入攻击很有帮助,它对特殊的字符,像单引号和双引号,加上了“反斜杠”,确保用户的输入在用它去查询以前已经是安全的了。但你要注意你是在连接着数据库的情况下使用这个…...
【K8S 云原生】Kurbernets集群的调度策略
目录 一、Kubernetes的list-watch机制 1、List-watch 2、创建pod的过程: 二、scheduler调度的过程和策略: 1、简介 2、预算策略:predicate 3、优先策略: 3.1、leastrequestedpriority: 3.2、balanceresourceal…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
IP如何挑?2025年海外专线IP如何购买?
你花了时间和预算买了IP,结果IP质量不佳,项目效率低下不说,还可能带来莫名的网络问题,是不是太闹心了?尤其是在面对海外专线IP时,到底怎么才能买到适合自己的呢?所以,挑IP绝对是个技…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
MySQL 主从同步异常处理
阅读原文:https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主,遇到的这个错误: Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一,通常表示ÿ…...
绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化
iOS 应用的发布流程一直是开发链路中最“苹果味”的环节:强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说,这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发(例如 Flutter、React Na…...
