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 Vuehttps://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>

支持的地区语言

4、案例项目：Arco Pro

Arco Design Vuehttps://arco.design/vue/docs/pro/start