Vue3教程 - 2 开发环境搭建

更好的阅读体验：点这里 （ www.foooor.com ）

2 开发环境搭建

要进行 Vue 开发，需要安装 Node.js，因为构建 Vue 项目的工具，例如 Webpack、Vite等，这些工具依赖于Node.js环境来运行。

Node.js自带的 npm（Node Package Manager）或 yarn（另一个包管理器）是管理 Vue 项目依赖的工具。Vue 项目需要使用 Node.js 中的 npm 和 yarn 来安装各种依赖库和插件。

2.1 安装nvm

安装 Node.js 可以使用 nvm 来安装，通过 nvm 可以很方便的切换 Node.js 版本。

1 windows安装nvm

在 github 上搜索 nvm-windows ：

然后点击发布的版本，进行下载：

下载完成后进行安装。

选择安装路径：

选择Nodejs安装路径：

安装完成，打开终端，可以查看 nvm 的版本：

nvm  -v

2 Mac或Linux安装nvm

执行如下命令（这个也是在github上的说明，搜索nvm）：

# 安装nvm 
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 刷新环境变量
source ~/.bashrc

# 检查nvm版本，检查是否安装成功
nvm -v

但是上面的方式，因为网络原因还是可能安装失败，如果安装失败，实在不行，就在 github 上下载 nvm 源码。然后解压到指定的目录。

github上搜索 nvm，或者直接访问 https://github.com/nvm-sh/nvm 。

例如我下载了 nvm-0.39.7.tar.gz，然后解压到 /usr/share 目录下：

cd /usr/share
# 解压
tar -zxvf nvm-0.39.7.tar.gz

然后配置环境变量

vim ~/.bashrc

在 ~/.bashrc 文件中添加如下内容：

# nvm的安装路径
export NVM_DIR="/usr/share/nvm-0.39.7"
[ -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
# nodejs下载更换淘宝镜像
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

然后刷新环境变量，并查看nvm版本：

# 刷新环境变量
source ~/.bashrc

# 检查nvm版本，检查是否安装成功
nvm -v

2.2 安装Node.js

安装完 nvm 就可以使用 nvm 安装 Node.js 了。

1 windows

使用如下命令可以下载和查看Nodejs版本：

# 显示远程可以安装的nodejs版本
nvm list available

# 显示本地安装的nodejs版本
nvm list

# 安装指定的版本
nvm install [version]
nvm install 20.15.0

# 卸载指定的nodejs版本
nvm uninstall [verson]
# 例如
nvm uninstall 20.15.0

# 使用指定的nodejs版本
nvm use [verson]
# 例如
nvm use 20.15.0

安装完成，可以查看node版本：

# 查看当前使用的node版本
node -v

2 Mac或Linux

# 查看所有能安装的nodejs版本
nvm ls-remote 

# 安装指定的版本，20.15.0是长期支持的版本，当然你也可以安装最新的版本
nvm install 20.15.0

# 使用指定版本，临时有效
nvm use 20.15.0

# 设置node默认版本
nvm use 20.15.0
nvm alias default 20.15.0

# 查看安装的node版本
nvm list

上面在查看和安装的时候可能会遇到一个问题，就是 nvm ls-remote 执行结果可能只显示"iojs-"开头的版本，那么尝试下面的方式：

# 由于网络问题nvm ls-remote执行结果可能只显示"iojs-"开头的版本，如果是这样，尝试下面的指令试试
NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist nvm ls-remote
NVM_NODEJS_ORG_MIRROR=http://nodejs.org/dist nvm install 20.15.0

安装完成，可以查看node版本：

# 查看当前使用的node版本
node -v

2.3 安装cnpm

使用 cnpm 主要是使用淘宝的镜像源，加速依赖包的下载。

# 安装淘宝cnpm
npm install -g cnpm --registry=https://registry.npmmirror.com

# 后面安装依赖可以使用cnpm
cnpm install 包名

如果你不想使用 cnpm ，也可以直接修改 npm 的镜像源，使用淘宝的镜像源：

# 设置npm的镜像源
npm config set registry https://registry.npmmirror.com

# 查看npm的镜像源
npm config get registry

# 删除当前镜像源，使用官方默认
npm config delete registry

2.4 安装VSCode

这里我就使用 VSCode 了，免费，而且 Vue 官方针对 VSCode 开发了插件，所以还是不错的选择。

当然你也可以使用 WebStorm，WebStorm 我认为是无敌的 ^_^。

在 VSCode 中搜索 vue，找到 Vue - Official 并安装，这是官方开发的插件：

下面开始开发，Talk is cheap , show me your code!

屁话少说，放码过来！