注意：Vite 本身也是依赖 Node.js 的，所以也需要安装好 Node 环境，并且 Vite 要求 Node 的版本要大于等于 12 版本。

下面，我们不会按照 Vite 官方文档中那样直接用 Vite 的脚手架搭建出一个完整的项目（npm init vite@latest），因为这样做很难理解 Vite 到底在这个项目中帮我们做了哪些事情。所以我们这里会从零开始，先安装 Vite 这个工具，再通过 Vite 对我们的代码一步步地做处理。

首先，我们安装一下 Vite 工具，这里我们只想在当前项目（vite的基本使用）下使用 Vite 对当前项目进行打包，所以我们选择局部安装：

npm install vite -D
复制代码

当然，你也可以全局安装：

npm install vite -g
复制代码

安装完 Vite 之后，我们想要用 Vite 对项目中的代码做一些处理，该怎么做呢？之前我们是通过 Live Server 插件启动的本地服务器打开的 index.html 文件，现在，我们可以把 Live Server 开启的本地服务器关了：

关掉 Live Server 的服务器后，我们再来执行 npx vite 命令（会使用局部的 vite 来搭建本地服务器）启动项目：

npx vite 执行的即 node_modules/.bin/vite 命令：

可以看到，执行 npx vite 之后，Vite 就会默认在 localhost 的 3000 端口上给我们搭建一个本地服务（这个服务和之前的 Live Server 没有关系），我们打开这个 http://localhost:3000/：

可见，Vite 已经对我们项目中的代码做了支持，这一过程中 Vite 会对我们 src 中的代码进行构建，构建完成后会搭建一个本地服务，之后浏览器访问的是 Vite 搭建的这个服务，Vite 的这个服务会提供相应的源代码。

而且，你会发现，Vite 的构建速度是非常快的，因为它是基于 ES modules 的，会直接把代码转成 ES modules 的代码，而我们的代码本来就是 ES modules 的代码，所以转换起来非常快。

那么，现在使用了 Vite 搭建的本地服务之后，和之间没有使用构建工具直接跑在 Live Server 服务上有什么区别呢？区别有三：

1. 有关文件的后缀名可以省略了（在 Webpack 中也有这个功能），如 src/main.js 中之前导入的 js 文件现在可以省略 .js 后缀：

   import _ from '../node_modules/lodash-es/lodash.default'
   import { sum } from './js/math'
   复制代码

2. 从 node_modules 中导入模块时可以不写长长的路径了，直接写模块名即可，如 src/main.js 中导入 lodash-es 模块现在可以直接这么写：

   import _ from 'lodash-es'
   复制代码

3. 会把有很多依赖的包（如 src/main.js 中导入的 lodash-es 模块）打包成一个文件，解决了之前上百个依赖文件发送上百次请求造成的性能消耗问题：

   

   当然，这里还有几个额外的文件（client、env.js），这是 Vite 内部自动加载的，因为这里面需要做一些其它东西，所以它会加载一些环境相关的东西。

可见，Vite 确实是帮我们做了一些事的。以上，就是 Vite 最基本的使用过程。