目录
Node.js是前端开发的必备工具,特别是在使用Vue或React开发项目时,需要npm安装依赖、运行开发环境以及项目打包,这里就分别介绍一下在Windows和Linux平台如何安装Nodejs。文章结尾,笔者还会使用Vite创建一个简单的Vue项目。
这里只提供原生常规的Node下载和安装,但是实际开发过程中通常无法只使用一个版本的Node进行开发,需要在多个版本中进行切换,所以需要使用nvm管理工具,具体安装和使用方法,大家可自行百度,如果后续腾出时间,笔者会重新出一篇nvm安装和使用的博客。
nvm下载地址:https://github.com/coreybutler/nvm-windows/releases。
1. 下载安装包
Node为Windows提供了两种安装包形式,一种是zip压缩包形式,另一种是msi安装包形式,zip解压安装操作简单,卸载也比较简单,直接删除即可,所以这里选择zip包模式安装。
如果是Linux模式下,则只有tar.xz一种模式可以选择。
压缩包下载地址:https://nodejs.org/en/download/prebuilt-binaries。
如上图所示,点击Prebuilt Binaries选项选择下载二进制压缩包,在页面中选择自己要安装的平台和版本,Windows平台就选择Windows,Linux平台就选择Linux,版本尽量选择LTS版本,LTS版本是长期支持的版本,选择完成后点击下载。
如果想要选择安装包形式,请点击Prebuilt Installer选项,然后选择系统和版本,点击下载,安装包下载完成后,点击msi文件进行安装,直接下一步,下一步即可。
2. Windows下安装
需要注意的一点是最新的Nodejs已经不再支持Windows7操作系统了,所以进行安装的Windows最低也得是Windows10。
解压node-v20.13.1-win-x64.zip文件,并将解压出的文件夹移动到真实想要安装的目录下。
然后需要node安装目录配置到NODE_PATH
环境变量中,打开开始菜单,选择设置。
进入设置页面之后,点击高级系统设置。
在高级系统设置页面,点击高级选项卡,然后再点击环境变量。
点击新建,创建一个新的环境变量,名称是NODE_PATH
,值就是你上面解压出来的node文件夹的路径。
设置完NODE_PATH
环境变量后,找到Path环境变量,点击编辑,将NODE_PATH
和node_global
配置到Path
环境变量中,然后以此点击确定,把刚打开的窗口全部确定完成后,环境变量配置完成。node_global
变量在后面使用Vite时会用到,这里先这样配,往下阅读,你就知道node_global
目录是做什么的了。
配置完环境变量后,需要校验node安装是否成功。在操作系统搜索栏直接搜索cmd,或同时按下Win + R键,然后输入cmd,回车打开命令行窗口,输入如下命令。
# 查看node版本号
node -v
# 查看npm版本号
npm -v
建议将npm仓库换成阿里仓库: https://www.npmmirror.com/,官网首页有配置方法,也可以安装cnpm。
# 配置仓库为淘宝镜像
npm config set registry https://registry.npmmirror.com
# 设置包下载路径
# 我们在前面已经把这个路径添加到了环境变量中了,这样安装vite/vue-cli等常用命令后就可以直接使用了
npm config set prefix "node安装目录\node_global"
# 设置缓存路径
npm config set cache "node安装目录\node_cache"
# 查看刚刚的配置是否生效
npm config list
如果安装了cnpm命令,一样需要把包下载路径和缓存路径修改一下。
3. Linux下安装
如果你不需要在服务器环境下部署Nodejs,那么可以跳过此章节,因为在实际生产过程中,项目的正式包都是在服务器环境下打包出来的,定期自动构建,如果你后续需要在Linux下安装Nodejs,再回来阅读此章节内容。
# 解压安装包
tar -xvf node-v20.12.2-linux-x64.tar.xz
# 将解压出的目录移动至真实想要安装的目录下,安装目录可以任意指定
mv node-v20.12.2-linux-x64 /usr/local/node20.12
然后将Node安装目录配置到环境变量中,Linux有两个可以配置环境变量的地方,一个是/etc/profile
,另一个是用户目录下的~/.bash_profile
(Ubuntu系统是下是~/.profile
),前者会在所有用户登录时加载,后者只会对指定用户有效,这里选择配置在~/.bash_profile
中,不影响其它用户使用。
vim ~/.bash_profile
# 添加如下内容:
# 将此处的node安装目录换成你自己的真实目录
export NODE_PATH=/usr/local/node20.12
export PATH=$PATH:$NODE_PATH/bin:$NODE_PATH/node_global
# 让环境变量生效
source ~/.bash_profile
# 查看node是否安装成功
node -v
npm -v
关于将npm仓库换成阿里仓库,以及设置依赖保存目录和缓存的操作和Windows下一样,这里不再赘述。
在上述配置环境变量的过程的中我们已经把node_global目录添加到了环境中变量中,这样在后续安装vite或vue-cli之后,就可以直接使用它们。
4. 使用Vite创建Vue项目
# 利用npm命令初始化vue项目
npm init vite@latest
- 执行如上命令后,需要输入项目名称,如果不输入默认项目名是vite-project。
- 按上下键,选中Vue,然后回车,如果需要创建React项目,就选择React。
- 继续按上下键,选中Typescript,然后回车,指定项目使用Typescript开发,如果需要使用JavaScript开发就选择JavaScript。
- 创建创建完成后会提示项目的运行命令,按照命令执行即可。
# 进入项目
cd vite-project
# 安装依赖
npm intstall
# 待依赖安装完成后,就可以运行项目了
npm run dev
项目启动之后默认端口是5173,如果想要停止运行,则在控制台输入字母q,然后回车,打开浏览器访问http://localhost:5173
,效果如下所示:
到此为止就使用Vite创建了一个Vue项目的基础框架,后续我们就可以继续这个项目进行开发了。
5. 结语
接触了Node,你就准备迎接各种奇奇怪怪的报错吧!
标签:node,npm,Nodejs,Windows,目录,Linux,PATH,安装,环境变量 From: https://blog.csdn.net/lxy_jrx/article/details/139101566