当前位置: 首页 > news >正文

vue3的福音框架arco.design

前言:

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

界面截图:

1、官网入口,web端,移动端的框架目前只支持react,有兴趣的可以点我去查看

点我icon-default.png?t=N7T8https://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 Vueicon-default.png?t=N7T8https://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 Vueicon-default.png?t=N7T8https://arco.design/vue/docs/pro/start

相关文章:

vue3的福音框架arco.design

前言&#xff1a; 在vue2于2023年底正式宣布不在维护&#xff0c;vue3使用越来越频繁的时刻&#xff0c;我们实现项目的辅助框架也越来越多。element, iview, antd 等经典框架继续风靡一时&#xff0c;不过也有很多好的框架&#xff0c;功能也强大&#xff0c;比如我们今天说的…...

BSP视频教程第29期:J1939协议栈CAN总线专题,源码框架,执行流程和应用实战解析,面向车通讯,充电桩,模组通信等(2024-01-08)

视频教程汇总帖&#xff1a;【学以致用&#xff0c;授人以渔】2024视频教程汇总&#xff0c;DSP第12期&#xff0c;ThreadX第9期&#xff0c;BSP驱动第29期&#xff0c;USB实战第5期&#xff0c;GUI实战第3期&#xff08;2024-01-08&#xff09; - STM32F429 - 硬汉嵌入式论坛 …...

Java lambda表达式如何自定义一个toList Collector

匿名类&#xff1a; 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服务实现原理云服务器高可用服务&#xff08;CSHA&#xff09;CSHA物理组网架构CSHA逻辑组网架构CSHA服务组件间…...

linux建立软链接——以matlab为例

如果软件没有建立软连接&#xff0c;每次打开terminal就只是个黑黑的窗口&#xff0c;每次打开软件都要自己load一次&#xff0c;比较麻烦。 第一步&#xff1a; 在工作夹新建文档&#xff1a;project.cshrc 第二步&#xff1a; 在夹新建文档中写入&#xff1a;module laod m…...

ubuntu20固定串口名称

查看串口的详细信息 udevadm info --name/dev/ttyUSB0结果&#xff1a; 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学习笔记-大白话推导

扩散模型系列&#xff1a; &#xff08;1&#xff09;扩散模型(一)——DDPM推导笔记-大白话推导 &#xff08;2&#xff09;扩散模型(二)——DDIM学习笔记-大白话推导 请提前关注&#xff0c;后续待更新&#xff0c;谢谢… 写在前面&#xff1a; &#xff08;1&#xff09;建议…...

【软件测试作业_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是一款优秀的屏幕、文本和视频捕获与转换程序。它能够捕获屏幕、窗口、客户区窗口、最后一个激活的窗口或用鼠标定义的区域&#xff0c;并支持BMP、PCX、TIF、GIF或JPEG格式的保存。Snagit还具有自动缩放、颜色减少、单色转换、抖动等功能&#xff0c;并能将捕获的图像转…...

12GoF之代理模式

解决问题的思维&#xff1a;AOP 解决问题技术&#xff1a;代理技术 代理技术太麻烦&#xff0c;因此使用框架 Spring AOP框架&#xff08;底层是代理技术&#xff1a;jdk动态daili&#xff0c;cglib&#xff09; 代理模式是GoF23种设计模式之一。属于结构型设计模式。 代理…...

Unity中URP下实现能量罩(扭曲流光花纹)

文章目录 前言一、能量罩花纹1、在属性面板接收能量罩花纹纹理2、申明 纹理 和 采样器3、在顶点着色器&#xff0c;应用 Tilling 和 Offset4、在片元着色器&#xff0c;纹理采样后&#xff0c;与之前的结果相乘输出 二、能量罩流光1、在顶点着色器&#xff0c;记录原uv值2、在片…...

南京银行高管上新:“70后董事长”谢宁将上任,能否及时救场?

撰稿|行星 来源|贝多财经 2024年上市银行的首例“换帅”事件&#xff0c;由南京银行拉开帷幕。 1月8日&#xff0c;南京银行&#xff08;SH:601009&#xff09;发布公告称&#xff0c;该行2024年第一次临时股东大会选举产生了第十届董事会11名董事&#xff0c;同意选举谢宁担…...

K8S容器编排基本使用

Kubernetes容器编排技术基本使用 1.部署模式发展历程 物理单机 – 虚拟机&#xff08;VMware&#xff09;-- IAAS&#xff08;基础设施即服务 比如够买jsp主机模式&#xff09;-- OPENSTACK&#xff08;多个机器分片使用思想&#xff09;-- docker&#xff08;容器化&#xf…...

PyTorch 各种池化层函数全览与用法演示

目录 torch.nn.functional子模块Pooling层详解 avg_pool1d 用法与用途 参数 注意事项 示例代码 avg_pool2d 用法与用途 参数 注意事项 示例代码 avg_pool3d 用法与用途 参数 注意事项 示例代码 max_pool1d 用法与用途 参数 注意事项 示例代码 max_pool2d…...

Redis:原理速成+项目实战——Redis实战7(优惠券秒杀+细节解决超卖、一人一单问题)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战6&#xff08;封装缓存工具&#xff08;高级写法&#xff09;&&缓存总…...

【刷题笔记3】

笔记3 输出小数位数控制。&#xff08;自动四舍五入&#xff0c;不够就自动补0&#xff09; double a123.456; cout<<fixed<<setprecision(2)<<a;递归题目的记录 &#xff08;1&#xff09;&#xff1a;n*m的棋盘格子&#xff08;n为横向的格子数&#xf…...

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系列快速接头满足汽车减震器的气压、油压测试要求

当汽车经过不平路面时&#xff0c;汽车减震器可以抑制弹簧吸震后因反弹带来的震荡和来自路面的冲击&#xff0c;为乘客带来平稳舒适的行车体验。减震器在出厂之前&#xff0c;需要模拟汽车的真实行驶环境&#xff0c;在模拟当中需要对它们进行气压和油压的轮番测试。 客户的测试…...

php中常用的几个安全函数

1. mysql_real_escape_string() 这个函数对于在PHP中防止SQL注入攻击很有帮助&#xff0c;它对特殊的字符&#xff0c;像单引号和双引号&#xff0c;加上了“反斜杠”&#xff0c;确保用户的输入在用它去查询以前已经是安全的了。但你要注意你是在连接着数据库的情况下使用这个…...

【K8S 云原生】Kurbernets集群的调度策略

目录 一、Kubernetes的list-watch机制 1、List-watch 2、创建pod的过程&#xff1a; 二、scheduler调度的过程和策略&#xff1a; 1、简介 2、预算策略&#xff1a;predicate 3、优先策略&#xff1a; 3.1、leastrequestedpriority&#xff1a; 3.2、balanceresourceal…...

保姆级教程:手把手教你用Zabbix监控MySQL数据库(Percona模板实战)

深度实战&#xff1a;基于Percona模板构建企业级MySQL监控体系 当数据库规模突破百万级QPS时&#xff0c;传统的手动检查方式就像用体温计测量森林大火——既低效又危险。去年某电商大促期间&#xff0c;我们曾因未及时发现连接数耗尽导致核心交易库雪崩&#xff0c;这个教训让…...

金士顿SA400S37固态硬盘掉盘自救指南:手把手教你用phison_flash_id修复固件(附工具包)

金士顿SA400S37固态硬盘掉盘故障深度修复手册 固态硬盘突然"消失"在系统中&#xff1f;金士顿SA400S37系列用户可能正遭遇典型的固件故障。这种问题通常表现为硬盘在BIOS中时隐时现、系统仅识别为20MB容量或直接无法初始化。不同于物理损坏&#xff0c;这类固件级故障…...

、SEATA分布式事务——XA模式

指令替换 项目需求&#xff1a;将加法指令替换为减法 项目目录如下 /MyProject ├── CMakeLists.txt # CMake 配置文件 ├── build/ #构建目录 │ └── test.c #测试编译代码 └── mypass2.cpp # pass 项目代码 一&#xff0c;测试代码示例 test.c // test.c #includ…...

8款AI论文写作工具(含爱毕业aibiye)推荐及新手快速上手方法

人工智能技术在学术研究领域的深度整合为论文撰写流程带来了革命性变革&#xff0c;通过8款核心智能工具的协同应用——包括文献智能分析系统、自动化内容生成引擎以及文本精准优化平台——研究者能够实现从数据挖掘到学术表达的全程智能化&#xff0c;显著提升文献处理效率与学…...

Linux党福利:Debian12下用VSCode+SDCC玩转51单片机(含WSL配置指南)

Debian 12下构建开源51单片机开发环境&#xff1a;VSCodeSDCC全攻略 在Linux环境下开发51单片机一直是个小众但极具技术挑战性的选择。相比Windows平台上Keil的垄断地位&#xff0c;开源工具链在Linux上的表现往往被低估。本文将带你用VSCodeSDCC在Debian 12上搭建一个完整的51…...

解锁AI编程效率:6个Continue插件实战技巧让开发效率提升10倍

解锁AI编程效率&#xff1a;6个Continue插件实战技巧让开发效率提升10倍 【免费下载链接】continue ⏩ Source-controlled AI checks, enforceable in CI. Powered by the open-source Continue CLI 项目地址: https://gitcode.com/GitHub_Trending/co/continue 作为一名…...

Wan2.1-umt5多轮对话效果展示:复杂任务分解与执行跟踪

Wan2.1-umt5多轮对话效果展示&#xff1a;复杂任务分解与执行跟踪 最近在测试各种对话模型时&#xff0c;我遇到了一个挺有意思的挑战&#xff1a;让AI帮忙规划一次完整的旅行。这可不是简单的一问一答&#xff0c;它涉及到理解模糊需求、主动追问细节、分解多个子任务&#x…...

2026年AI就业风口!这5个神仙岗位,高薪低门槛,普通人也能转行!

根据LinkedIn数据&#xff0c;2026年AI相关岗位增长迅猛&#xff0c;其中AI咨询顾问、机器学习工程师、AI产品经理、数据与检索工程师等岗位需求旺盛&#xff0c;且部分岗位对计算机科学学位要求不高。文章详细介绍了这5个岗位的火热原因、转行路径及薪资范围&#xff0c;并给出…...

SQLite在线查看器:浏览器中的数据库管理革命

SQLite在线查看器&#xff1a;浏览器中的数据库管理革命 【免费下载链接】sqlite-viewer View SQLite file online 项目地址: https://gitcode.com/gh_mirrors/sq/sqlite-viewer 在数据驱动的时代&#xff0c;SQLite数据库无处不在——从移动应用到桌面软件&#xff0c;…...

Pixel Epic · Wisdom Terminal 部署与压测:使用.accelerate库优化推理性能

Pixel Epic Wisdom Terminal 部署与压测&#xff1a;使用.accelerate库优化推理性能 1. 引言 如果你正在使用Pixel Epic Wisdom Terminal进行AI推理任务&#xff0c;可能会遇到性能瓶颈问题。今天我们就来聊聊如何用Hugging Face的.accelerate库来提升推理速度&#xff0c;…...