新电脑Mac安装前端环境,未完待续~
电脑:MacBook Pro (15-inch, 2017)
版本接近可以用迁移助理
太久远就只能新电脑环境重装了,
微信小程序,支付宝小程序,安卓,IOS 无非这几种
以下就是一名前端小程序开发人员环境配置步骤
仅供参考
新电脑安装
1.下载常用程序并安装
1.1 在App Store下载程序:
微信;腾讯会议;QQ,Xcode,百度网盘,Xmind,Wps office
1.2 在百度网盘下载自己留的安装包:
oss【提示不允许安装的话,打开电脑设置-安全与隐私最下面设置允许开】;
android Studio;
rn debugger;
向日葵;
ClashX;
EasyConnect
1.3
微信开发者下载官方地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
支付宝开发者工具下载官方地址:
https://render.alipay.com/p/f/fd-jwq8nu2a/pages/home/index.html
谷歌浏览器:
http://www.51xiazai.cn/soft/88708.htm
Idea:
http://www.jetbrains.com/idea/ 官网下载2021.2.2
【我在网上找的激活步骤,可借鉴http://www.ddooo.com/softdown/214097.htm 。到了试用日期重新reset即可】
以上除了Android Studio 都可以傻瓜式安装,Android在本文章后面会写。
2.公司常用设置(这个是本公司的,可以忽略)
公司vpn链接,【微信收藏】
谷歌浏览器上的常用网站链接【微信收藏】
公司最新证书钥匙串里添加
3.安装环境
因为前端要安装很多东西,经过日积月累,本人觉得brew安装管理版本最好了
在安装brew前,需要先打开Xcode,点击同意协议并install。
不然直接安装brew会报错。
3.1 安装brew
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
我选择的是中科大1
3.2 安装nvm,对node版本进行控制
brew install nvm
安装完之后要执行命令进行环境配置
touch .bash_profile
将以下内容放入该文件中
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && \. "/usr/local/opt/nvm/nvm.sh" # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completionexport HOMEBREW_BOTTLE_DOMAIN=https://mirrors.ustc.edu.cn/homebrew-bottles/bottles #ckbrew
eval $(/usr/local/Homebrew/bin/brew shellenv) #ckbrew
然后执行保存命令
source .bash_profile
保存成功之后执行
nvm -v
有版本出来就说明nvm安装成功
接下来安装各种需要的node版本
nvm install v10.20.1
nvm install v10.24.1
nvm install v14.20.0
npm install -g yarn
安装成功之后,最好是关闭终端重新打开执行
node -v
如果有版本,则说明安装成功,如果提示nvm找不到则按已下操作
touch ~/.zshrc
open ~/.zshrc
文件里面写入
source ~/.bash_profile
然后保存执行命令
source ~/.zshrc
然后再执行node -v试试,不出意外就成功了~
3.3 安装watchman
brew install watchman
3.4 安装ruby
brew install ruby
ruby安装后需要配置环境,
open .bash_profile
将一下内容放入打开的文件中保存
export PATH="/usr/local/opt/ruby/bin:$PATH"
export LDFLAGS="-L/usr/local/opt/ruby/lib"
export CPPFLAGS="-I/usr/local/opt/ruby/include"
source .bash_profile
然后执行ruby -v 应该有版本号出来了吧,安装成功~
3.5 安装cocoapods
brew install cocoapods
3.6安装jdk,我们的项目用的是17
brew install openjdk@17
安装完之后可以将提示内容放入之前操作的环境文件里。
因为我要用到多种jdk所以我给放到了一个指定目录下,执行命令
sudo ln -sfn /usr/local/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk
open .bash_profile
将以下内容放入打开的文件中保存
export JAVA_HOME="/Library/Java/JavaVirtualMachines/openjdk-17.jdk/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"
export CLASSPATH="$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar"
source .bash_profile
保存后执行 java -version,出来版本了 安装成功~
3.7安装react-native-cli,用于app项目,没有的可不安装
yarn global add react-native-cli@2.0.1
4.下载了公司众多项目,可忽略
cybershop-web-backend:nvm alias default v10.24.1 yarn install
cybershop-says-wxwork-guide: nvm alias default v10.20.1 yarn install
【微信开发者工具添加企业微信模式-设置-扩展设置】
cybershop-saas-weapp-eshop : nvm alias default v10.24.1 yarn install
puzhehei: nvm alias default v14.20.0 yarn install
crescentlake : yarn install
dali :yarn install
5.安装安卓环境安装Android Studio 4.2.2
我是百度网盘自己存了一份
可到该链接下载:https://developer.android.google.cn/studio/archive
1.自动默认一直点击下一步
2.打开Android配置
第一个tab下SDK Manager 下选择
Android API 32;Android Api31【下面全部勾选】;
Android11.0(R);Android10.0(Q);Android9.0(Pie);
Android8.1(Oreo);Android6.0(Marshmallow);第二个Android SDK Bu
ild-Tools33下选择31,
Android SDK Command选择第一个Apply下载点击完成 安装一个模拟器材,方便调试使用
打开 ADV Manager
第一项选择Marsmallow
第二项选择 Api 31
next 添加
ADV Manager 选择pixel_3a_api31_x86 就下载完成了
Android配置环境
open .bash_profile
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/latest/bin
source .bash_profile
6下载安装gradle
下载链接:https://downloads.gradle-dn.com/distributions/gradle-7.2-all.zip
然后解压放在了自己电脑中 open /Users/mac/public 下
最后设置环境变量
open .bash_profile
export GRADLE_HOME="/Users/mac/public/gradle-7.2"
export PATH=$PATH:$GRADLE_HOME/bin
source .bash_profile
gradle -v
出来版本号,安装成功~
7.以上环境配置完了,该跑项目了~
打开app项目根目录
yarn install
然后检测一下app的rn环境,
npx @react-native-community/cli doctor
安卓环境已满足,可以跑了~
yarn dev:rn
yarn android
8.安卓真机调试
8.1.模拟机调试1.打开Android Studio 在栏目下 app后面选择自己下载的模拟器2.File-sync 等待执行成功后3.app前面有个锤子 点击执行4.点击手机型号后的图标 run8.2.Android Studio真机调试:1.首先手机设置为usb开发调试我采用的是安卓手机真机调试-小米打开usb调试模式,路径 我的设备-全部参数-连续点击“MIUI版本号”,直到手机屏幕提示手机已经进入了开发者模式,进入手机开 发者模式后,点击进入“设置”主页的“更多设置”选项。接着点击进入“开发者选项”。最后打开“USB调试”选项后,手机就打开了USB调试模式。2.插上手机3.File-sync 等待执行成功后4.app前面有个锤子 点击执行5.点击手机型号后的图标 run ,然后手机上自动添加了开发版程序6.命令执行adb devices adb reverse tcp:8081 tcp:80817.开始调试
8.3.命令真机调试1.首先手机设置为usb开发调试我采用的是安卓手机真机调试-小米打开usb调试模式,路径 我的设备-全部参数-连续点击“MIUI版本号”,直到手机屏幕提示手机已经进入了开发者模式,进入手机开 发者模式后,点击进入“设置”主页的“更多设置”选项。接着点击进入“开发者选项”。最后打开“USB调试”选项后,手机就打开了USB调试模式。2.插上手机3.yarn dev:rn 成功后会弹出一个层 http://localhost:8081/rn_temp/index.bundle?platform=android&dev=true5.adb devices adb reverse tcp:8081 tcp:80814.yarn run:android5.手机自动安装
9.使用RNdebugger调试
我下载的是rn-debugger-macos-x64.zip,大家可到官网下载
打开软件 在左上角软件Debugger-Open Config File 下打开
查找defaultNetworkInspect设置为true,保存(注意:不修改该设置的话是拿不到接口调用的信息的)
在真机或者模拟器里调出开发者工具,选择 Debug,即可看到执行的各个事件
新电脑Mac安装前端环境,未完待续~相关推荐
- 新入手Mac配置前端环境教程
目录 1.安装 Xcode 2.安装 Homebrew 3.安装 Git 4.安装 nvm 利用 nvm 安装 node Mac系统安装nvm后,nvm命令找不到 跳槽新进入一家公司 ,给新配置的 M ...
- 关于新电脑快速安装开发环境
首先说一说他们的关系,我们看视频的话首先电脑或者手机里首先要有一个播放器,而环境变量就像是播放器,Java程序就是我们的视频,而Java的各种开发工具就像是剪辑视频的软件: 一些工具如果因为网速下载过 ...
- linux安装java学习环境(未完待续)
linux安装java学习环境 数据库连接命令 连接mysql数据库 格式为: mysql -hip地址 -p端口号 -u root -p 输入密码例如: mysql -hlocalhost -p33 ...
- CentOS8搭建SonarQube9+SonarScanner+Postgresql+bitbucket+cppcheck 扫描C语言。(未完待续)
前提条件 带有您首选发行版的新安装的 Linux 服务器. 一.添加新用户sonar 1.添加一个新的用户帐户 使用命令创建一个新的用户帐户sonar. # adduser sonar 使用 为新用户 ...
- Mac安装ruby环境及Xcode安装cocoapods整体流程--ios引用第三方库的环境准备
发文原由:ios刚用来开发不久,需要在开发时引用第三方库,百度查找了资料,需要先安装ruby环境,再进行cocoapods安装 一.mac安装ruby环境 (引用博客–https://www.cnbl ...
- linux系统装fluent没有界面,Linux上安装ANSYS后的一些坑(未完待续)
以ANSYS2020R2为例 问题一 fluent串行启动 (真串行,不是在启动界面选择的串行)是正常的,但是并行会挂,问题截图如下: 解决方案: 这个是Intel的问题,因为Fluent默认Inte ...
- 家用计算机需要安装哪些软件,新电脑需要安装哪些软件
新电脑需要安装哪些软件?新电脑到手之后肯定是要选一个自己喜欢的操作系统,之后再开始安装各类软件,那么哪些软件是新电脑必备的呢? 新买的笔记本电脑需要做什么? 刚拿到手的新电脑当然得装配最合适的系统. ...
- 苹果电脑mac安装nginx教程
苹果电脑MAC安装nginx教程 使用homebrew安装,提醒需要翻墙,最后面介绍的源码安装方式不需要翻墙,只需要在墙内搞到源码即可,建议先确认一下自己能否翻墙,如果可以翻墙就用第一种方法,如果不能 ...
- java一键安装_新工具一键安装Java环境!微软又双叒叕造福开发者
原标题:新工具一键安装Java环境!微软又双叒叕造福开发者 微软又出一个新工具,正在以实际行动征服开发者的心. 在Windows平台上,只需要下载一个安装包,就能够安装Java开发环境了. 之前,因为 ...
最新文章
- python课程将主要介绍哪些内容-熊学堂 · 人工智能 | 课程介绍
- InstallShield与Visual Studio
- VTK修炼之道24:图像基本操作_单颜色通道图像合成彩色
- 搞定ubuntu下环境变量的配置
- 第二届高校大数据比赛之鼠标轨迹识别
- P5952-[POI2018]水箱【最小生成树】
- clion卸载+clion连接docker编写trt程序
- java xmlutil_XmlUtil工具类(toxml()和toBean())
- RabbitMQ学习之集群模式
- posix thread条件变量
- 机器学习、数据分析类面经分享
- Python技术公众号100天了
- 计算机主机前声音口怎么设置吗,电脑耳机没声音怎么设置_耳机没声音怎么设置-太平洋IT百科手机版...
- 基于国土“三调”成果的自然资源开发利用和保护的综合研究
- 如何把flv视频转成mp4?
- 华为面试状态码解密手把手教学
- 笔记本连接显示器后没有声音_笔记本外接显示器后没声音怎么回事
- 数据分析之北京房价复习
- 《全数据时代的炼金师》读书笔记(一)
- 计算机基础表格模拟题,4月全国网络统考资料《计算机应用基础》模拟题及参考答案——电子表格...