本人使用macos电脑,近期准备做一个产品的管理后台,在看了 anti design、tdesign、arcodesign等前端 VUE框架后,发现ARCO在设计感成熟度上是最好的,因此考虑使用,结果是一系列的踩坑,我的主要工作领域在后端,对前端尤其是以node为核心的体系不太了解,以至于到处踩坑,摔的七荤八素,好在经过多方努力,最终实现打开了arco design的默认demo,后面的工作就是按照文档逐渐摸索了。
因为VUE全家桶、typescript等对初学者总会给人语焉不详的感觉,官方文档一句带过,碰到了百思不得其解,因此这里记录所有的坑,希望对后面的同学有所帮助,先上个效果图。
其实只是 arco design的默认页面,打开实在是不值得炫耀,但有些坑实在是找不到解决方案,个人又比较笨,摸索了好几天才到这一步,所以不喜勿喷啊。
不过个人还是真的很喜欢 arco 的这个设计感。
第一部分 预装软件
Arco Design 需要预装的软件有 nodejs、npm、git
这3个软件安装难度不大,大家可以自行找帮助文档,为了提升速度后续的命令也可以用cnpm这样速度比较快,cnpm要在npm的基础上安装,命令为:
npm i -g cnpm
npm的知识还是要好好学下,以后会经常用到,无非是本地安装,全局安全之类的,难度不大,官方给的 npm i -g arco-cli 是全局安装 arco-cli 软件的意思。
npm i -g arco-cli
这里遇到了第一个坎,各种报错
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /usr/local/lib/node_modules/arco-cli
npm ERR! dest /usr/local/lib/node_modules/.arco-cli-ok4ZqykT
npm ERR! errno -13
经过分析发现,是权限不足导致的,将命令行加上 sudo,完美通过
sudo npm i -g arco-cli
这里还有一个坑就是要安装 yarn 这个软件,文档里没有提但启动会遇到!
sudo npm i -g yarn
第二部分 系统初始化 - 1
系统提供的初始化命令是 arco init hello-arco-pro
执行后系统报错,没有配置git无法安装demo?
这个操作是不是有些过于强势了... ...
查遍百度,没有针对 “请提交你的 Git 修改后继续操作” 这句话的解释!!
因为我日常操作没有用git,所以这里一次没搞定,隔天高了一下gitee,发现可行,但换目录有时又会报错,于是在github上又开了一个仓库,才算搞定,这里不详细记录过程了,出现上面的问题就是你要配置一个可用的git环境,并且要这个环境和网上的仓库同步,提交数据后才能进行。
最终配置完成后,我找了个空目录发现也能进行了,不知道是什么原因,反正是必须配置好GIT才能进行下一步。
总的感觉是对于日常不用 git 进行代码同步的用户十分不友好。
第二部分 系统初始化 - 2
终于出现下面的页面了,前两个坑,领域不同,折腾的我够呛,持续进行下一步...
结果又是一大堆的报错,很奇怪为什么一个demo会出这么多错误, 耐着心看报错信息,居然又是权限不足,执行初始化的命令 应该加 sudo
sudo arco init hello-arco-pro
经过漫长的安装终于过去了,又出现了熟悉的报错
如果在第一步安装了 yarn 则是下面的界面
可能是开发者大神根本不会在这种小问题上浪费笔墨吧,对于初学者而言的确挺无语的。
按照操作 进入目录,启动程序
cd hello-arco-pro
yarn dev
居然,居然,居然又报错了!!
这是个什么错?
没有提示!!!
其实是有提示的,老问题还是权限不够!
加 sudo 问题解决
sudo yarn dev
出现了之前的页面。
有一句话说的是,对于初学者而言,问什么问题都是可以的,因为所有的问题对于他而言都是未知的世界,希望能帮到大家,也纪念我踩坑的48小时。
----------
2022年12月11日补充
----------
对于每个应用都需要使用 sudo 这个问题,后来又纠结了好久,因为每次修改文件都会问密码很麻烦,网上的说法有很多,我罗列一下:
1、因为创建项目的时候使用的是 sudo,因此以后都要问密码;
这个明显不是我想要达到的目的,因为不用 sudo,项目创建不起来,不知道 windows 平台是什么样子,不过macos很麻烦;
2、有人说是SIP导致的,关闭即可;
我关闭了SIP,症状未有丝毫改变;
3、有人说是没有启用root或把当前账号加入root组;
我也做了相关的尝试,启动root账号以后创建项目变得异常缓慢,不知道是什么原因,可能是没有从已经下载的数据包中读取数据,而是要重新下载,可能是启用root后,很多缓存都没有的原因,另外 root 账户看起来也很不舒服,不是首选项;
将当前账号加入root组也做了,但依然没有解决创建账号之后的权限要求;
4、最终我发现根本上还是文件目录的权限问题;
这是新添加项目后的目录权限;
这是修改目录权限后的截图;
命令为:
sudo chmod -R 777 dir_name
这里一定要用777,755是不行的,因为文件会没有执行权限
如此设置完成后,VUE项目后续将不再申请更多权限或输入密码,完美解决。