前端第一天--react环境配置for Mac--permission denied

前端第一天--react环境配置for Mac--permission denied

第一步,安装node.js开发环境 。

第一种,Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 下载后直接安装即可。

第二种,接着打开终端,输入以下命令安装Homebrew
ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install);

再输入命令 brew install node

完了之后,在终端输入node -v, 出现版本号则表示安装成功。如下:

(非必需)可安装nvm进行node版本管理

第二步,安装npm

如果你安装了最新版本的node,则默认已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。如下

如果不是最新的,建议升级了最新的,或者单独再安装npm,命令:brew install npm

第三步,安装jspm

在全局范围安装jspm,就可以在任何命令使用jspm命令了,终端输入命令:npm install jspm -g
完成后,输入 jspm ,会返回一些帮助信息 。

第四步,为项目添加jspm依赖

选择你喜欢的目录,新建一个文件夹,可使用命令mkdir xxx, cd 到对应的文件夹下(这里假设新建文件夹名称为 ZXY_RN_Project)。
初始化npm, 创建package.json, 输入命令:npm init ,填写你的项目名称,接下来一路回车即可。
查看ZXY_RN_Project,会发现下面多了一个package.json文件.
重要步骤来了,输入
npm install jspm --save-dev
把jspm添加到项目开发依赖。完成后,命令ls, 会发现又多了node_modules文件,打开这个文件,会发现里面很多关于babel,ES6等等的东西。
最后执行命令 jspm init, 为jspm创建配置文件config.js, 一路回车即可。
到这里,项目添加jspm依赖就算完成了。

第五步,安装React

在ZXY_RN_Project下,通过jspm安装react, 命令jspm install react@0.14.0-rc1 (注:0.14.0-rc1为版本号)。一路回车即可。如果安装过程,出现error错误,则重新再执行一下命令即可,直到没出现error信息即为成功。
通过jspm安装rect-dom, 命令jspm install react-dom@0.14.0-rc1 (注:0.14.0-rc1为版本号)。过程同上。
(非必需) 如果你项目想使用semantic-ui, 需安装semantic-ui,命令jspm install semantic-ui 导入semantic-ui样式需要安装jspm插件,命令jspm install css
上面步骤完成后,你会发现ZXY_RN_Project下面多了jspm_packages文件夹。

第六步,安装BrowserSync

通过npm安装browserSync,命令npm install -g browser-sync
使用BrowserSync启动项目,命令browser-sync start --server 。 如果你想启动后,增加一些监听文件修改时,自动刷新页面,则启动命令为 browser-sync start --server --no-notify --files ‘xxxx’ (xxx为具体的文件名,相对路径,有多个时,可用逗号分开,如 'index.html, app/main.js’);
到此,我们可以看到React项目正常启动后,出现页面。


以上转载来源:
作者:永不背弃
来源:CSDN
原文:https://blog.csdn.net/wsnokia/article/details/56280427


以下为个人笔记:
在遇到permission denied的情况下,
1、命令前加sudo
2、命令前增加–unsafe-perm,即sudo npm install --unsafe-perm

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值