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

相关推荐
毕设十刻1 天前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
瘦马1 天前
PhotoShop网页版(在线ps)在快速修复老照片,在线修旧如新
ui·photoshop·photoshop网页版·在线p图
王同学要变强1 天前
【深入学习Vue丨第二篇】构建动态Web应用的基础
前端·vue.js·学习
程序定小飞1 天前
基于springboot的web的音乐网站开发与设计
java·前端·数据库·vue.js·spring boot·后端·spring
武昌库里写JAVA1 天前
element-ui 2.x 及 vxe-table 2.x 使用 css 定制主题
java·vue.js·spring boot·sql·学习
不会算法的小灰1 天前
Vue.js 基础教程:从入门到实践
前端·javascript·vue.js
拉不动的猪1 天前
浏览器&Websocket&热更新
前端·javascript·vue.js
那些免费的砖1 天前
Reka UI - 一款免费开源的 Vue 无头 UI 组件库,样式定制开发项目的绝佳选择
vue.js·ui·开源
前端付豪1 天前
Vue 中的 JSX:让组件渲染更灵活的正确方式
前端·javascript·vue.js
apollo_qwe1 天前
Vue 权限控制神技!自定义 auth 指令优雅实现按钮级权限管理
vue.js·架构