当前位置: 首页 > news >正文

vue3搭建Arco design UI框架

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

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

管理员运行CMD
在这里插入图片描述

npm i -g arco-cli

安装成功后如下:
在这里插入图片描述

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

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

cd D:\Work\PrOjects\20230517\webuiD:

在这里插入图片描述

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

arco init hello-arco-pro

第一步:选择选项2,使用内部版(不要选择github登录版)
选项选择如下即可
在这里插入图片描述

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

//安装依赖
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文件新增了如下几个配置

 '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

在这里插入图片描述

http://www.lryc.cn/news/102752.html

相关文章:

  • 提升数据质量的四大有效方式
  • ALLEGRO之FlowPlan
  • Python - OpenCV实现摄像头人脸识别(亲测版)
  • date日期相关操作汇总
  • 生产者-消费者模式
  • Jetson Nano之ROS入门 -- YOLO目标检测与定位
  • 【移动机器人运动规划】01 —— 常见地图基础 |图搜索基础
  • mongotop跟踪Mongodb集合读取和写入数据
  • Linux中使用du命令来查看目录的大小
  • 【Linux】进程篇Ⅰ:进程信息、进程状态、环境变量、进程地址空间
  • 保护 TDengine 查询性能——3.0 如何大幅降低乱序数据干扰?
  • 状态机实现N位按键消抖
  • uniapp自定义消息语音
  • k8s安装Jenkins
  • 共筑开源新长城 龙蜥社区走进开放原子校源行-清华大学站
  • Jgit 工具类 (代码检出、删除分支(本地、远程)、新建分支、切换分支、代码提交)
  • 什么是redux?如何在react 项目中使用redux?
  • mysql的json处理
  • 前端学习——Vue (Day8)
  • Windows环境下安装及部署Nginx
  • 使用AOP切面对返回的数据进行脱敏的问题
  • TDengine时区设置
  • 站外引流效果差?一文带你搞懂解海外主流社交媒体算法!
  • css 动画之旋转视差
  • maven项目、springboot项目复制文件进来后没反应、不编译解决方法
  • android jetpack App Startup 应用启动时初始化组件(java)
  • 【设计模式|行为型】命令模式(Command Pattern)
  • SqlServer 批量删除表
  • [Linux]线程基本知识
  • STM32 串口基础知识学习