MACOS arco design 初学者踩坑指南

Posted 2023-03-23 tacity

本人使用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项目后续将不再申请更多权限或输入密码，完美解决。