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

相关推荐
HwJack207 分钟前
HarmonyOS应用开发中EmbeddedUIExtensionAbility:跨进程 UI 嵌入的“幕后导演“
ui·华为·harmonyos
掘金者阿豪1 小时前
在AI时代,没有人是“只写一行代码的人”——我们为何都在被迫成为全栈?
vue.js·后端
英俊潇洒美少年2 小时前
JS 事件循环(宏/微任务) ↔ Vue ↔ React** 三者的关系
javascript·vue.js·react.js
烈焰飞鸟2 小时前
iconfont 在 uni-app 项目中的完整使用指南
vue.js·uni-app·iconfont
533_2 小时前
[vue3] 动态引入本地静态资源(URL)
前端·javascript·vue.js
电子云与长程纠缠2 小时前
Godot学习04 - UI界面
学习·ui·godot
EF@蛐蛐堂3 小时前
【vue】新前端工具链Vite+ Alpha
前端·javascript·vue.js
SuperEugene4 小时前
Vue3 组合式函数(Hooks)封装规范实战:命名 / 输入输出 / 复用边界 + 避坑|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
云和数据.ChenGuang4 小时前
AI向量数据库chromadb的swagger-ui的运行使用教程
大数据·数据库·人工智能·ui·向量数据库·向量计算
英俊潇洒美少年4 小时前
Vue3 中 watch的 flush 选项(默认无/`post`/`sync`)的区别
前端·javascript·vue.js