Vite 创建 Vue3 项目(完整)

一、搭建 Vue3 项目前提条件

         检查是否安装 Node.js。Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。

可访问 Node.js中文网 在线下载。

（1）检查 Node 版本信息 ，按键盘window+R键,输入cmd,打开命令提示符窗口

        输入： node –v

（如果提示 "node" 不是有效命令，则代表未安装 Node.js环境，先进行下载安装。）

（2）检查 Npm 版本信息 ，按键盘window+R键,输入cmd,打开命令提示符窗口

        输入： npm –v

二、使用 Vite 创建最新版 Vue3 项目

（PS：创建指定版本Vue项目请直接看 第三部分 内容）

1.新建项目目录（你打算保存 vite 创建的vue项目的位置），地址栏清空并输入 cmd，回车 进入控制台界面：

2.输入命令： npm init vite@latest my-vue-app -- --template vue

       第一次使用 Vite创建Vue项目并且未安装过 Vite脚手架的包，则会提示进行安装，输入 Y 等待 Vite包安装完成。 

    （说明： @后面可指定vue版本号，latest 表示最新版）

3.如果已经安装过 vite 脚手架，创建项目则会很快帮我们初始化完成，根据提示的三步命令依次安装项目运行所需的依赖并运行项目：

如下所示：

4.项目创建完成，运行成功：

三、使用 Vite 创建指定版本的 Vue3 项目

 1.新建项目目录（你打算保存 vite 创建的vue项目的位置），地址栏清空并输入 cmd，回车 进入控制台界面：

2.获取 Vite的版本号： npm view create-vite versions

3.创建制定版本的 Vite + Vue项目 要创建一个指定版本的 Vite 项目，请使用 npm init vite@<version> 命令，其中 <version> 是要安装的 Vite 版本。

        例如，要创建一个 Vite 2.9.5版本 + Vue3 的项目 ，可以运行以下命令：

        npm init vite@2.9.5 vite-vue2 -- --template vue

（说明：vite-vue2 是项目文件名称，Vite 默认创建 vue3项目，这里我是文件名成写成了 2）

        这将创建一个名为 vite-vue2 的新目录，并在其中初始化一个 Vite 项目。Vite 会自动安装指定版本的相关依赖项并生成默认的项目结构和配置文件。

        请注意，在使用 npm init vite 命令创建项目时，如果未指定版本号，则会安装最新版本的 Vite。如果你希望使用不同的 Vite 版本，需要显式地指定版本号。

        指定对应的 vite版本后，如果没有安装对应版本的 vite脚手架，则会提示安装，安装完成后自动初始化项目。

        安装提示安装项目依赖包后 即可启动项目：

4.项目运行成功：

5.打开项目文件，可以看到指定的 vite 版本为指定的 2.9.5。默认创建的 vue项目版本为 vue3：