Vue3环境搭建图文教程

Vue3 环境搭建图文教程

一、 安装 Node.js

前往Node.js 官网，下载适合你系统的安装包（以 Windows 为例，选择msi 后缀的安装包）。

双击安装包，一直点 next，最后点击 finish 即可

安装完成后，打开命令提示符（CMD），输入node -v，如果能正确输出版本号，则说明 Node.js 和 npm 安装成功。

二、创建 Vue3 项目

1.创建项目

npm create vite@latest vue3project

在命令提示符中输入以下命令创建一个新的 Vue3 项目（假设项目名为 vue3project，可自行修改）：

上述命令中，npm create vite@latest用于调用最新版本的 Vite 创建项目，vue3project是项目名称

2.选择语言

3.成功创建项目示例

4.进入项目目录

项目创建完成后，在命令提示符中输入cd vue3project，进入项目目录。

5.安装依赖

进入项目目录后，输入npm i，安装项目所需的依赖包。

6.启动项目

安装完成后，在项目目录中输入npm run dev，启动项目。

启动成功后，会在命令提示符中显示项目的访问地址，一般为http://localhost:5173/（Vite 默认端口是 5173）。

示例截图：

也可打开浏览器，输入http://localhost:5173/，即可看到 Vue3 项目的初始页面。

如果出现下面界面，那就恭喜你，成功完成了vue3项目运行！

至此，从node.js 、vue3项目创建、框架选择、依赖安装项目运行等所有的Vue3 环境搭建的已完成啦！

三、下期预告

本期就到这了，如果对你有帮助的话就点个关注或收藏吧，下期更新在vscode中安装vue3的插件以及本人自用主题和vue3代码的编写