Code前端首页关于Code前端联系我们

1.使用Vite创建Vue3+TypeScript项目——环境准备

terry 2年前 (2023-09-08) 阅读数 137 #Vue

1。安装 nvm

功能:节点版本管理

因为有些框架对Node版本有严格的要求,所以对于需要在一台电脑上同时维护多个不同版本的框架项目的同学来说,nvm简直就是必备神器。它为我们提供了安装、更新和切换节点版本的简单功能

Mac

// 通过Homebere安装
// PS: Homebrew是一款macOS下的软件包管理工具,建议必备 官网: http://brew.sh
brew install nvm
通过Homebrew安装后电脑一般识别不了nvm命令,需要配置环境变量
打开命令行:
1. 创建文件: touch .bash_profile // 已经存在此配置文件的可以跳过
2. 编辑文件: vi .bash_profile
3. 修改文件: 在该配置文件下,输入:
    export NVM_DIR="$HOME/.nvm"
  . "/usr/local/opt/nvm/nvm.sh"
4. 保存并退出: :wq
5. 启用配置: source .bash_profile
PS: 每次重启电脑后都需要重新执行该命令来让配置生效, 为了方便操作,可以在
~/.zshrc 文件中 增加一行指令
source ~/.bash_profile 
这样每次电脑重启都会自动应用修改后的配置
 

胜利

Win系统下安装nvm相对简单
!!! 注意: 如果电脑已经安装过nvm或者node, 建议在重新安装nvm前清理干净

1. 下载安装包: https://github.com/coreybutler/nvm-windows/releases
// 建议直接下载nvm-setup.zip, 可以省去配置环境变量的步骤
2. 双击安装
3. 没错 就是这么简单
 

附录:一些开发常用命令

nvm install stable     // 安装最新稳定版node 不建议使用
nvm install<version>   // 安装指定版本的node
nvm uninstall<version> // 卸载指定版本node
nvm use<version>       // 切换到指定版本的node
nvm ls                 // 查看已经安装的所有版本
nvm current            // 显示当前版本  win版的nvm貌似已经不支持这个指令了, 可以使用nvm ls代替,
前面带*的就是当前正在使用的版本(maOS也可)
 

2。通过nvm安装node

说明上面已经提到了。 Win和macOS是一样的,这里就不过多赘述了

踏入陷阱

  • 安装过程中,mac上安装顺利,但是win上安装后,无法识别node命令。这可能是因为默认情况下没有启用 node nvm 管理。您可以尝试使用命令nvm on来启用
  • 另外,如果配置完成后node -v可以正常识别,但npm -v无法识别,可能是因为8.11及以上版本对应的npm无法自动安装正常安装的node文件夹。除了node.exe之外,应该还有对应的npm文件,但是可以发现文件被下载到临时文件夹node

image.pngimage.png

打开文件夹,将压缩后的npm包解压到相应的文件夹中。注意及时做否则会被删除
image.pngimage.png

3。安装nrm(按需)

nrm(npm 注册表管理器)是 npm 的镜像资源管理工具。有时国外资源太慢。您可以使用它在 npm 源之间快速切换

// 安装 建议全局
npm install nrm -g
 

常用命令

nrm ls                   查看全部配置的源
nrm use <name>           切换源
nrm add <name> <address> 配置源
nrm test                 测试各个源的延迟(可以先运行这个指令,然后挑选当前网络环境下延迟最低的源)
 

这个工具特别适合那些需要切换公司内部资源的人。如果没有这个需求,配置淘宝镜像地址即可。此工具无需安装

4。安装纱线(推荐)

Yarn 功能与 npm 类似,但性能和稳定性更好。当网络资源较弱时,yarn重试机制保证单个请求失败不会导致整个安装失败

npm install -g yarn
 

版权声明

本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门