【16】前端UI框架Arco design

从0开始搭建后台管理系统，这是No16。上一篇我们讲到了：创建接口将要接收的数据结构。这一节，我们来介绍下前端UI框架Arco design。

arco介绍

官方地址：

https://arco.design/

Arco Design是字节跳动推出的一套企业级设计系统，包括UI组件库、设计语言和工具链。

1. 设计语言完整统一
   • 提供了规范的色彩系统、排版方案、图标库和交互模式
   • 确保产品UI一致性，提升用户体验
   • 支持品牌定制，可通过主题配置调整视觉风格
2. 组件丰富且易用
   • 覆盖200+组件，从基础组件（按钮、输入框）到复杂组件（表格、树、表单）
   • 组件API设计直观，文档详尽，上手成本低
   • 内置多种交互模式，满足常见业务场景需求
3. 技术栈支持完善
   • 同时支持Vue 3和React框架
   • 提供Vite、Webpack等构建工具插件
   • 与TypeScript深度集成，类型定义完整
4. 性能与无障碍优化
   • 组件经过性能优化，加载和渲染效率高
   • 支持按需加载，减小打包体积
   • 符合WCAG无障碍标准，提升应用可访问性
5. 开发体验良好
   • 提供Figma设计插件，实现设计与开发的无缝协作
   • 内置代码生成工具，加速开发效率
   • 活跃的社区支持和定期更新

使用Arco Design Pro

参考地址：

https://arco.design/vue/docs/pro/start

1、安装arco cli

npm i -g arco-cli

2、进入到我们的主项目根目录，以 Arco Design Pro 为模版创建一个新的项目

arco init yuen-admin-arco

出错，参考如下：

https://blog.csdn.net/qq_45811059/article/details/149105462

我的解决方案，新建或者编辑系统变量，将BASE_CONFIG设置成local。

接下来又报错：

× Project dependency installation failed, you can try to manually install them later
Error: Command 「npm install」 executed failed:
npm WARN ERESOLVE overriding peer dependency
npm WARN deprecated @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated @types/minimatch@6.0.0: This is a stub types definition. minimatch provides its own type definitions, so you do not need this installed.
npm WARN deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated trim@0.0.1: Use String.prototype.trim() instead
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
husky - .git can't be found (see https://typicode.github.io/husky/#/?id=custom-directory)
npm ERR! code 1
npm ERR! path F:\dev\code\myself\lovecto\yuen\yuen\yuen-admin-arco
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c husky install

npm ERR! A complete log of this run can be found in: C:\Users\ASUS\AppData\Local\npm-cache\_logs\2025-12-24T01_18_41_414Z-debug-0.log

 arco-init  Project init failed!
Error: spawnSync pnpm.cmd ENOENT

出现这个，先不管，用Trae打开刚刚创建的项目，修改 package.json 下的 scripts 将原来的

"prepare": "husky install",

改为：

"prepare": "cd .. && husky install yuen-admin-arco/.husky"

再

npm install

就安装依赖成功了。

接下来运行：

npm run dev

看到如下界面:

不过，点登录报错如下：

[plugin:vite-plugin-eslint] F:\dev\code\myself\lovecto\yuen\yuen\yuen-admin-arco\src\components\tab-bar\tab-item.vue
  80:16  error  Type of the default value for 'itemData' prop must be a object  vue/require-valid-default-prop

✖ 1 problem (1 error, 0 warnings)
F:/dev/code/myself/lovecto/yuen/yuen/yuen-admin-arco/src/components/tab-bar/tab-item.vue
    at formatError (file:///F:/dev/code/myself/lovecto/yuen/yuen/yuen-admin-arco/node_modules/vite/dist/node/chunks/dep-3e87c7b2.js:40359:46)
    at TransformContext.error (file:///F:/dev/code/myself/lovecto/yuen/yuen/yuen-admin-arco/node_modules/vite/dist/node/chunks/dep-3e87c7b2.js:40355:19)
    at TransformContext.transform (F:\dev\code\myself\lovecto\yuen\yuen\yuen-admin-arco\node_modules\vite-plugin-eslint\dist\index.js:1:2469)
    at async Object.transform (file:///F:/dev/code/myself/lovecto/yuen/yuen/yuen-admin-arco/node_modules/vite/dist/node/chunks/dep-3e87c7b2.js:40612:30)
    at async loadAndTransform (file:///F:/dev/code/myself/lovecto/yuen/yuen/yuen-admin-arco/node_modules/vite/dist/node/chunks/dep-3e87c7b2.js:36998:29
Click outside or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.js.

找到src\components\tab-bar\tab-item.vue，把defineProps相关代码改为如下：

const props = defineProps({
    // itemData: {
    //   type: Object as PropType<TagProps>,
    //   default() {
    //     return [];
    //   },
    // },
    itemData: {
    type: Object as PropType<TagProps>,
      default: () => ({
        title: '',
        name: '',
        fullPath: '',
        query: undefined,
        ignoreCache: false,
      }),
    },
    index: {
      type: Number,
      default: 0,
    },
});

错误来源于ESLint的vue/require-valid-default-prop的校验规则触发，itemData的prop设置的默认类型不符合要求；

参考：

https://blog.csdn.net/m0_61846689/article/details/148714638