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

vue3的福音框架arco.design

news 2025/8/14 8:30:38

前言：

在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');

国际化：

<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