vue3的福音框架arco.design

前言:

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

界面截图:

vue3的福音框架arco.design_第1张图片

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

国际化:



支持的地区语言
语言 地区编码
简体中文 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

你可能感兴趣的:(vue-插件,vue3.0,前端,javascript,vue.js)