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

相关推荐
tjh00012 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友2 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js
86Eric3 小时前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件
Jewel1054 小时前
如何配置Telegram Mini-App?
前端·vue.js·app
bigyoung5 小时前
使用 Arco Design 的 Table 组件实现可编辑列
前端·react.js·arco design
前端大白话5 小时前
前端必学!10 个超实用 Vue3 实战技巧大放送
前端·javascript·vue.js
BillKu5 小时前
Vue3父子组件数据同步方法
前端·javascript·vue.js
綦枫Maple6 小时前
Vue实战(08)解决 Vue 项目中路径别名 `@` 在 IDE 中报错无法识别的问题
前端·ide·vue.js
生命猿于运动6 小时前
Trae使用体验
前端·javascript·vue.js
G扇子6 小时前
Vue2与Vue3的双向数据绑定原理与实现对比
前端·vue.js