前端开发-基础环境的安装与配置（windows+Mac）

Jingjie
777 阅读3分钟

一.nvm和node的安装及使用

1.nvm是什么？

nvm（node.js version management），它是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的node。

2.windows系统下载nvm，安装nvm,安装node,npm

2.1 下载nvm

 可在点此在github上下载最新版本,打开网址我们可以看到有两个版本：

  • nvm-noinstall.zip：绿色免安装版，但使用时需进行配置,不推荐。
  • nvm-setup.zip：安装版，推荐使用

2.2 安装nvm

a.双击nvm-setup.exe,按照提示进行安装

b.选择nvm安装路径

 c.选择nodejs路径

d.确认安装即可

e.安装完确认

打开CMD，输入命令 nvm ，安装成功则如下显示。可以看到里面列出了各种命令，后面会列出这些命令的中文示意。

2.3 安装，管理node.js

1.查看本地安装的所有node版本；有可选参数available，显示所有可下载的版本。

nvm list [available]

2.安装，命令中的版本号可自定义，具体参考命令1查询出来的列表

nvm install 15.0.1

3.使用特定版本

nvm use 15.0.1

测试是否安装成功

node --version

npm --version

4.卸载特定版本

nvm uninstall 15.0.1

2.4 注意

  本节列出node.js版本管理工具nvm的安装及使用，需要注意的是安装路径最好不要出现中文和空格。

3. Mac系统下载nvm,安装nvm,安装node,npm

3.1 安装nvm

在此主要介绍在 Mac 下 nvm 的安装和遇到的问题。

注意：

1.不要使用 Homebrew 安装 nvm，这个在 nvm 的官方文档中有说明。

2.关于 .bash_profile 文件。如果用户 home 目录下没有则新建一个就可以了，不需要将下面的两段代码写进去，因为你在执行安装命令的时候，系统会自动将这两句话写入 .bash_profile 文件中。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

网络上我找了好多文章都是说在安装前先手动将下面这两句话写进去，经过测试是不正确的，并且会造成安装不成功，这一点需要注意一下。

export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

3.保证 Mac 中安装了 git，一般只要你下载了 Mac 的 Xcode 开发工具，它是自带 git 的。

具体的步骤如下：

首先打开终端，进入当前用户的 home 目录中。

cd ~

然后使用 ls -a 显示这个目录下的所有文件（夹）（包含隐藏文件及文件夹），查看有没有 .bash_profile 这个文件。

ls -a

如果没有，则新建一个。

touch ~/.bash_profile

如果有或者新建完成后，我们通过官方的说明在终端中运行下面命令中的一种进行安装

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

在安装完成后，关闭并重启终端，输入nvm 就会出现 Nvm 帮助文档，这表明你安装成功了。

还有一点，在最新的 Catalina 系统下安装 nvm

注意最新的 macOS Catalina 系统（即版本 10.15 及之后）默认的 shell 是 zsh，不在是 bash ，安装完之后会出现命令不可用的情况。

这里有两种解决办法：

第一种 我们需要将默认 shell 改为 bash，具体参见苹果官网的相关文章 如何更改默认 Shell，如果你之前就习惯使用 zsh 也可自行配置。

第二种 如果你要使用 zsh 终端，那么在上述方式安装完之后，在 .bash_profile 同一目录下创建一个 .zshrc 文件，使用 vim 打开文件添加下面两句话，重启终端即可。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

3.2 常用命令

nvm --version ：显示nvm版本。--version可简化为-v。

nvm ls-remote 列出所有可安装的版本

nvm ls 列出所有已经安装的版本

nvm install <version> 安装指定的版本，如 nvm install v8.14.0

nvm uninstall <version> 卸载指定的版本

nvm use <version> 切换使用指定的版本

nvm current 显示当前使用的版本

nvm alias default <version> 设置默认 node 版本

nvm deactivate 解除当前版本绑定

nvm on 打开nodejs控制

nvm off 关闭nodejs控制

二.包管理工具

测试是否安装成功

yarn --vresion

安装依赖

yarn global add @vue/cli

三.vsCode安装及插件的安装

vsCode是目前大多数前端从业者的喜爱的开发工具 vscode下载地址 在此列举开发中常用的几个插件

  • Chinese (Simplified) Language Pack for Visual Studio Code

中文（简体）语言包为 VS Code 提供本地化界面。

  • Auto Close Tag

自动添加HTML/XML关闭标记。

  • Auto Rename Tag

自动重命名配对的HTML/XML标记，与Visual Studio IDE一样。

  • Beautify

美化代码,代码书写更显眼,层级区分更明细

  • Bracket Pair Colorizer

这个扩展允许匹配括号与颜色识别。用户可以定义要匹配的字符和要使用的颜色。

  • ESLint

扩展使用安装在打开的工作区文件夹中的ESLint库

  • GitLens — Git supercharged

git多人协作的时候需要查看日志，如果能在当前代码中查看到那是很方便的一件事，能省去很多时间去其他工具查看，提高工作效率。

四.git的安装

官网安装包下载地址
国内访问官网较慢可以使用 国内的镜像下载地址

相关配置,及安装过程可以在 菜鸟教程 Git安装配置中查看

五.浏览器的安装

谷歌浏览器,ie浏览器等的安装：官网下载安装即可

谷歌浏览器优点：

1）浏览器简洁性能高。

2）支持HTML5更全面以及浏览器兼容问题少
3）chrome的插件系统很强大，如果不了解就体验不到chrome的最爽的地方,各种辅助工具、屏蔽广告、开发工具等等

4）调试体验更好

avatar
文章
阅读
粉丝