vue3搭建Arco design UI框架

技术 :Vue3.2.40
UI框架 :Arco design 2.44.7
需要安装:yarn 1.22.19 和npm 8.19.4

1.第一步安装本地全局arco脚手架

管理员运行CMD

javascript 复制代码
npm i -g arco-cli

安装成功后如下:

2.第二步在需要存放项目的文件夹拉取项目

我这里把项目存放在 D:\Work\PrOjects\20230517\webui文件夹

javascript 复制代码
cd D:\Work\PrOjects\20230517\webui

D:

3.使用命令选择项目配置

javascript 复制代码
arco init hello-arco-pro

第一步:选择选项2,使用内部版(不要选择github登录版)
选项选择如下即可

4.第四步打开项目安装依赖

javascript 复制代码
//安装依赖
yarn install
//运行项目
yarn run

5.登录

点击登录按钮登录(如果登录后页面报错,则请看下面

6.踩坑点

如果报错: error @arco-design/web-vue/es/table/interface type import should occur before import of @/hooks/loading import/order

则:调整下面顺序即可,正确顺序如下截图


如果报错:lodash相关的
则:调整下面顺序即可,正确顺序如下截图

我这边在.eslintrc.js文件新增了如下几个配置

javascript 复制代码
 'no-underscore-dangle': 0,
    'no-console': 0,
    'no-plusplus': 0,

7.登录后进入首页预览图

8.文档

Arco Design地址:https://arco.design/vue/docs/pro/start

官方常见问题解决地址:https://arco.design/vue/docs/pro/faq

相关推荐
秃头网友小李10 小时前
前端难点:keep-alive 缓存什么?RouterView 的 key 为什么要带 scopeId?
前端·vue.js
徐小夕12 小时前
JitWord 3.0 正式发布,高精度Word异构解析+复杂组件兼容,打造web端协同Word编辑器
前端·vue.js·算法
奋斗吧程序媛1 天前
补充一个小知识点:有关@click.native
前端·vue.js
laowangpython1 天前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
英勇无比的消炎药1 天前
一行命令背后:TinyRobot CLI 如何重构 AI 对话接入的效率范式
vue.js·aigc
jay神1 天前
基于 FastAPI + Vue 的宠物领养管理系统
前端·vue.js·python·毕业设计·fastapi·宠物
一杯奶茶¥1 天前
水果销售网站 CRM客户信息管理系统 超市管理系 酒店管理系统 健身房管理系统 在线音乐网站 校园招聘系统
java·vue.js·spring boot·mysql·spring·java项目
风华圆舞1 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
英勇无比的消炎药1 天前
一站式搞定品牌风格:TinyRobot 主题定制从入门到精通
vue.js
鲲穹AI超级员工1 天前
多款实用配色工具汇总,适配设计、UI 创作等多元场景
ui·色彩设计