使用node.js创建一个vue3前端项目（详细入门）

本次演示如何使用node.js来创建一个vue3前端项目，并能在VScode中打开并编辑。

1、node.js版本：

首先，下载vue3需要的node版本为16以上，如果你的node版本较低，可以先升级一下版本；

node.js的官网为：
https://nodejs.orghttps://nodejs.org/可以下载适合自己电脑的版本；

下载node.js并配置好环境变量之后，可以在命令行使用

node -v

来查看自己安装的node.js版本：

在这里补充一些有关node.js的版本问题：

列出所有可用的Node.js版本：

nvm list available

要查看已经安装的Node.js版本

nvm list

安装特定版本的Node.js

nvm install <version>

将安装的版本设置为默认版本：

nvm use <version>
nvm alias default <version>

2、下载vue3项目：

创建一个空文件夹（没有中文，没有空格）并使用cmd命令行的方式进入到这个文件夹

进入命令行之后，运行

npm create vue@latest

命令，可以创建一个最新版本的vue项目。

@后面跟的是项目的版本，latest表示一个最新项目，也可以根据你的需求创建不同版本的vue项目版本。如果vue后面不跟@latest，默认表示创建一个最新vue项目（如果你是第一次下载vue项目，那么这里会比较慢，可以耐心等待一下）

运行 npm create vue@latest命令之后，会出现很多选项，可以根据你的需求选择合适的选项：

现在我们创建了一个新的vue3项目，可以在你新建的文件夹下查看：

3、使用VScode来打开新建的vue项目：

要想使用VScode来编程vue项目，需要先在VScode中安装vue的插件：

找到扩展：搜索vue，可以看到很多插件，选择第一个：

在VScoed中安装vue插件之后，就可以使用VScode来编辑vue项目了；

在VScode中打开刚才新建的vue项V

在VScode中，默认的项目名称都会以大写形式展现；

在VScode中打开终端（注意打开终端的位置，一定要在新建的vue项目的目录下），运行

npm install

命令，可以帮我们下载vue项目的依赖：
依赖下载完成之后：

如果依赖成功下载之后，在vue项目中会多出一个目录node_modules来存放我们下载的依赖包：

现在，我们可以启动一下我们的vue项目了：

还是在打开的终端使用

npm run dev

命令来启动我们的vue项目：

端口号5173就是vue项目启动的默认端口号：
我们访问这个端口号：可以看到一个vue的原生页面，表示我们的vue项目创建并启动成功了。

总结：

我们创建vue项目步骤：
1、使用npm create vue 命令来创建一个新的vue项目，并指定一些初始的参数（项目名称、使用语言等等）

2、在VScode中打开我们创建的vue项目，并使用 npm install 命令来下载我们项目的依赖

3、现在就可以对项目进行编程，并使用 npm run dev 来启动该vue项目。