探究vite——新一代前端开发与构建工具（一）

Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

创建第一个 Vite 项目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

使用 NPM:

$ npm init vite@latest

使用 Yarn:

yarn create vite

使用 PNPM:

pnpx create-vite

然后按照提示操作即可！

在Porject name地方输入你的项目名称，例如我的项目名称是vite-first;

点击回车后，选择你需要前端技术框架：

这里我选择：vue

注意vite构建工具，默认是安装vue3.0版本的

 vue是指vue+JavaScript，vue-ts指vue+typescript

按回车选择你所需要的开发语言，这里我选择：vue；

然后进入项目，在项目底下安装依赖

cd vite-first

 yarn


or  
 
npm install

依赖安装完成后，使用yarn dev命令启动项目。

至此，一个使用vite搭建的前端项目就搭建起来了。

以下是本项目的版本信息，在此记录一下。

命令行界面

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "serve": "vite preview" // 本地预览生产构建产物
  }
}

可以指定额外的命令行选项，如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。