一、什么是Vite

Vue3作为一款现代化的JavaScript框架，配合Vite这样的构建工具，极大地简化了流程，提升了效率。Vite 是一个基于现代浏览器原生的 ES 模块系统，能够以原生模块导入的方式运行源代码的开发服务器。它被设计用来替代传统的打包工具（如Webpack和Parcel），在开发环境下提供更快的冷启动和热重载能力。

Vite 的设计理念是利用浏览器原生的 ES 模块导入/导出语法，通过将项目的源代码直接提供给浏览器，而不是打包成一个或多个文件。这样做的好处是可以避免传统的打包过程，省去了构建、编译、打包和生成中间文件的时间，从而提高了开发环境的启动速度。Vite支持Vue、React等多种框架，能够快速上手和扩展。

二、 node.js安装（环境准备）

Node.js (官网 https://nodejs.org)是一个开源的、跨平台的 JavaScript 运行环境（本质是Chrome引擎的封装）,允许开发者使用 JavaScript 来编写服务器端代码 npm (Node Package Manager)是 Node.js 包管理器, 用来安装各种库、框架和工具

打开官网直接点击下载

双击打开 

 

 后面只需要一直按next下一步就可以了，不需要设置其他

那么怎么查看安装好没有呢 

 我们可以通过打开命令提示符（cmd）查看

输入以下指令查看安装版本

node -v
npm -v

 这样Node就安装好了

三、npm镜像源的修改

 我们可以通过 npm get registry 指令查看当前镜像源

接着我们需要更换镜像源，设置淘宝镜像源（默认镜像源是国外网址，国内访问经常失败，所以要设置淘宝镜像源）

指令 npm config set registry https://registry.npmmirror.com/

 拓展：

安装网络请求库axios：  npm install axios
axios使用 unpkg CDN（可以通过CDN调用，也可以通过本地找到文件axios.min.js直接导入）：
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

四、pnpm包管理器的安装（全局安装）并基于pnpm创建脚手架项目

我们可以基于Node.js中的 npm 和 Vite 创建Vue3项目

指令 npm create vite@latest

（但是我们这里不用npm）

我们基于 pnpm 和 vite 创建Vue3项目（推荐！！它是 npm 的直接替代品，但速度更快、效率更高）

1、首先安装pnpm工具包： npm install -g pnpm    (npm install -g xxxx  全局安装工具包，可以直接在命令行使用，否则无法使用)

2、创建脚手架：pnpm create vue 

3、接下来我们可以输入项目名称或者直接使用他这个名称然后按回车 ；配置脚手架相关插件，一直按回车选择否就好了

 我们在打开命令提示符（cmd）的文件夹中就创建了一个项目

4、执行以下指令

  cd vue-project
  pnpm install
  pnpm dev

最后复制他给出的链接http://localhost:5173/，在网页中打开就是如下页面，这样一个手脚架就做好啦！

 

 最后我们可以通过VScode打开这个项目文件夹

这样一个手脚架就做好啦！