新电脑Mac安装前端环境,未完待续~

news2025/1/22 21:00:09

电脑: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_completion

export 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/40491.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【iOS】UICollectionView的基本使用

UICollectionView是与UITableView相似的控件,不过它的布局更加自由。 与UITableView的不同 tableViewcollectionView初始化需要指定布局style。需要指定一个布局类。子视图布局一行代表一个cell,布局只需要考虑行高。无视行列限制,一个item…

如何在 WSL 下实现 NGINX 反向代理

WSL 是 Windows 自带的 Linux 子系统。它比传统的虚机启动更快,占用系统资源更少,非常利于我们开发基于 Linux 系统的各种应用。本文基于 Ubuntu 20 介绍如何使用 NGINX 实现反向代理功能。 什么是反向代理? 反向代理是一个可以把系统请求分…

[网络] TCP协议是什么?套接字Socket是什么?它们是什么关系?

文章目录前言TCP协议是什么?IP协议网络设备才有“门牌号”(IP地址)网卡、网卡驱动与操作系统的关系操作系统进程与TCP协议操作系统进程和Socket套接字用户进程和Socket套接字用户进程如何消费Socket套接字文件里的数据?TCP协议与S…

呼吸系统药物--平喘药

急性哮喘和慢性哮喘 支气管哮喘属于慢性病。 急性哮喘指支气管哮喘的急性发作,一般在凌晨4点~7点间发作,伴有咳嗽、咳痰、胸闷、气喘和哮鸣音。(用短效、能快速起效的药物治疗,沙丁胺醇喷雾剂(β2受体激动药&#xf…

学习JavaScript进阶

JavaScript进阶 循环语句 for循环 // 类似python中的for i in range(20)for(let i0; i<20; i){console.log(i) }while循环 const MAX_TIMES 20; let cur 0 while (cur < MAX_TIMES){cur;console.log(cur) }do while do {cur ;console.log(cur); }while (cur < MAX_…

【前端开发】CSS BEM命名规范

目录1、BEM2、实战BlockElementModifier3、总结1、BEM BEM其实是块&#xff08;block&#xff09;、元素&#xff08;element&#xff09;、修饰符&#xff08;modifier&#xff09;的缩写&#xff0c;利用不同的区块&#xff0c;功能以及样式来给元素命名。 通过bem规范来命名…

2. Composition API

Composition API 1.Composition API 接下来我们来介绍一下Vue3中新增的Composition API如何使用。注意Composition API仅仅是Vue3中新增的API&#xff0c;我们依然可以使用Options API。先来实现一下之前演示的获取鼠标位置的案例。做这个案例之前&#xff0c;需要先介绍一下…

Java项目:洗浴中心管理系统(java+SSM+JSP+jQuery+javascript+Mysql)

源码获取&#xff1a;俺的博客首页 "资源" 里下载&#xff01; 项目介绍 本项目分为前后台&#xff0c;包含普通用户与管理员两种角色&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,管理员信息管理,查看用户信息,新闻公告管理,产品类型管理,级别信息…

物联网开发笔记(53)- 使用Micropython开发ESP32开发板之蓝牙BLE通信

一、目的 这一节我们学习如何使用我们的ESP32开发板通过蓝牙和手机进行通信。 二、环境 ESP32 手机&#xff08;笔者用的小米10&#xff09; Thonny IDE 三、蓝牙介绍 这个知识大家自行百度吧&#xff0c;这里不再赘述什么是蓝牙和蓝牙的历史&#xff0c;以及相关的专业知识…

JS(第二十六)ES6语法中function

JS(第九课)深刻的去理解函数._星辰镜的博客-CSDN博客 1 Function函数的定义 方式1 函数声明方式 function 关键字 (命名函数) function fn(){} 方式2 函数表达式(匿名函数) var fn function(){} 方式3 new Function() var f new Function(a, b, console.log(a b)); f(1, …

Tomcat服务器和Web开发介绍

Tomcat服务器和Web开发介绍 一、开启Web开发 什么是web开发 WEB&#xff0c;即网页的意思&#xff0c;它用于表示Internet主机上供外界访问的资源。 Internet上供外界访问的Web资源分为&#xff1a; 静态web资源&#xff08;如html 页面&#xff09;&#xff1a;指web页面中供…

数据挖掘期末复习

考点目录 文章目录考点目录复习准备1. 数据挖掘的标准流程2. 数据挖掘的主要功能3. 数据探索的主要内容及其意义数据质量分析1.异常值分析2.缺失值分析数据特征分析1.分布分析6.相关性分析4. 数据预处理的作用及其主要任务5. 常见的噪声处理方法6.常用的缺失值处理方法7. 常用的…

Map和Set的详解

Map和Set是一种专门用来搜素的容器或者数据结构&#xff0c;其搜索的效率与其具体的实例化子类有关&#xff0c;是一种适合动态查找的集合容器 一、模型 一般把搜索的数据称为关键字&#xff08;Key&#xff09;&#xff0c;和关键字对应的称为值&#xff08;Value&#xff09;…

Teams Tab App 的 manifest 分析

上一篇文章我们深入来分析了 tab app 的代码&#xff0c;这篇文章我们研究一下 manifest。 Teams 的 manifest 实际上是一个很复杂的 json&#xff0c;里面的配置非常多&#xff0c;之前的文章陆陆续续的讲过一些配置&#xff0c;我们在这篇文章里来看看关于 tabs 的一些配置&…

链表之删除单链表中的重复节点

文章目录删除单链表中的重复节点题目描述解题思路代码实现删除单链表中的重复节点 力扣链接 题目描述 编写代码&#xff0c;移除未排序链表中的重复节点。保留最开始出现的节点。 示例1:输入&#xff1a;[1, 2, 3, 3, 2, 1]输出&#xff1a;[1, 2, 3]示例2:输入&#xff1a;…

WEB网站安全检测系统设计与实现

目 录 1 引言 1 2 Web服务器所受的威胁及防御 1 2.1 缓冲区溢出 1 2.2 SQL注入攻击 1 2.3 基于脚本的DDos攻击 2 2.4 其他的不安全因素 3 3 Web的木马检测系统的设计 4 3.1 体系结构 4 3.2 处理流程 5 3.3 对客户端访问的响应 7 3.4 策略引擎的设计 8 3.4.1 策略的属性 8 3.4.2…

9、软件包管理

文章目录9、软件包管理9.1 RPM9.1.1 RPM 概述9.1.2 RPM 查询命令&#xff08;rpm -qa&#xff09;9.1.3 RPM 卸载命令&#xff08;rpm -e&#xff09;9.1.4 RPM 安装命令&#xff08;rpm -ivh&#xff09;9.2 YUM 仓库配置9.2.1 YUM 概述9.2.2 YUM 的常用命令9.2.3 修改网络 YU…

Linux系统中基本的启动方式

大家好&#xff0c; 今天主要和大家聊一聊&#xff0c;Linux系统的启动方式有哪些&#xff1f; 目录 第一&#xff1a;启动方式基本简介 第二​&#xff1a;启动模式的选择 第一&#xff1a;启动方式基本简介 Linux系统支持多种启动方式&#xff0c;可以从SD/EMMC、NAND Flas…

Jumperserver堡垒机管理服务器实战

一、 Jumpserver堡垒机简介 1、跳板机简介 跳板机就是一台服务器,开发或运维人员在维护过程中首先要统一登录到这台服务器,然后再登录到目标设备进行维护和操作。 跳板机缺点:没有实现对运维人员操作行为的控制和审计,使用跳板机的过程中还是会出现误操作、违规操作导致的…

Vue实现角色权限动态路由详细教程,在vue-admin-template基础上修改,附免费完整项目代码

前言 vue-admin-template是一个最基础的后台管理模板&#xff0c;只包含了一个后台需要最基础的东西&#xff0c;如果clone的是它的master分支&#xff0c;是没有权限管理的&#xff0c;只有完整版vue-element-admin有这个功能&#xff0c;但是为了小小的一个权限管理而用比较…