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

相关推荐
喵个咪几秒前
统一范式:中后台Admin项目标准化API分层开发方案(Vue/React通用)
前端·vue.js·react.js
喵个咪11 分钟前
拒绝过度封装!GoWind Admin:基于Element Plus重塑中后台CRUD开发范式
前端·vue.js·typescript
angerdream1 小时前
Android手把手编写儿童手机远程监控App之WebRtc切换摄像头与桌面共享
vue.js
UXbot2 小时前
无需设计经验也能做原型:AI辅助工具功能评测
前端·人工智能·低代码·ui·ios·交互
喵个咪3 小时前
吃透后台权限系统:从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js
hdsoft_huge3 小时前
全开源数字孪生系统搭建方案:全套技术文档
vue.js·开源·node.js·echarts·webstorm
学且思3 小时前
Vue3 Patch 算法深度解析:从原理到源码实现
前端·vue.js
卤蛋fg63 小时前
vxe-table 导出 XLSX 文件:自动展开分组并导出图片
vue.js
mengqudoh3 小时前
elementui el-table 表头固定功能
javascript·vue.js·elementui
YiWait3 小时前
基于 Vue 3 的网络收音机,编译为桌面应用软件
前端·javascript·vue.js