字节前端开源 UI 组件库-技术文章-思凡资源网

Arco Design Vue 是由字节跳动 Arco Design 团队开发的一套基于 Vue 3 的 UI 组件库。它遵循 Arco Design 的设计语言，旨在提供一致的用户体验和视觉风格，同时保持高性能和良好的开发体验，是一个功能全面的组件库。

适用于需要快速构建高质量企业级应用的各种场景，并且组件丰富、灵活定制、易用性强，包括表格、表单、树型选择器、图片查看、弹出层、对话框、时间日期选择器、描述列表、骨架屏等 70+ 常用组件。

部分组件预览：

安装使用：

// npm
npm install --save-dev @arco-design/web-vue
// yarn
yarn add --dev @arco-design/web-vue
// 按需加载
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';
// configjs
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ArcoResolver()],
    }),
    Components({
      resolvers: [
        ArcoResolver({
          sideEffect: true
        })
      ]
    })
  ]
});

主题定制：

// vite.config.js 
export default {
  css: {
   preprocessorOptions: {
     // 使用 less 进行主题定制
     less: {
       modifyVars: {
         'arcoblue-6': '#f85959',
       },
       javascriptEnabled: true,
     }
   }
 },
}

功能和特性：

基于 Vue 3：充分利用 Vue 3 的新特性，如组合式 API，提升开发体验。

类型安全：使用 TypeScript 开发，提供类型定义文件，提高代码的健壮性。

国际化支持：支持多语言，方便构建国际化应用。

灵活的主题定制：允许通过修改主题变量来定制组件的样式。

响应式设计：组件支持响应式，适配不同屏幕尺寸的设备。

最佳实践：遵循前端开发的最佳实践，提供清晰的代码结构和命名规范。

按需加载：支持按需加载组件，减少应用的打包体积，提升加载速度。

《前端资源推荐》收集各种前端组件 UI 框架、JS 插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目、学习资源、特效源码等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/arco-design/arco-design-vue

官方文档：https://arco.design/vue/docs/start