Logo

菜单

发布于 2026-01-06 5 阅读
0

Vite 2 入门指南 搭建你的第一个 Vite 项目 Vite 项目的结构 开发服务器 工作原理 更新缓慢的困扰 什么？没有样式加载器？ 插件，插件，插件

Vite 2 入门指南

搭建你的第一个 Vite 项目

Vite项目的结构

开发服务器

它是如何运作的？

更新缓慢的困境

什么？没有用于样式设置的加载器吗？

 插件，插件，插件

Vite⚡️是前端工具界的埃米纳姆。

说唱之神

为什么？因为它速度极快，而且送货服务很好。

二月中旬，尤文宣布发布最新版本的Vite。

yyx990803

隆重推出 Vite 2.0

Evan You ・ 2021年2月16日

#javascript #webdev #vite

Vite（法语意为“快速”，发音为[ˈvə] /vit/）是一种新型的前端 Web 开发构建工具。您可以将其想象成一个预配置的开发服务器 + 打包工具的组合，但更加精简高效。它利用浏览器原生的 ES 模块支持以及用编译成原生代码的语言编写的工具，esbuild提供流畅现代的开发体验。

通过本教程，您将学习如何快速搭建一个带有 Vite 的 Vue3 应用，一些很棒的插件可以改善 DX（开发者体验），更重要的是，了解它的工作原理以及为什么速度如此之快。

搭建你的第一个 Vite 项目

打开你常用的终端并运行：

npm init @vitejs/app
Enter fullscreen mode Exit fullscreen mode

或者，如果您更喜欢 Yarn：

yarn create @vitejs/app
Enter fullscreen mode Exit fullscreen mode

按照提示操作：

创建邀请应用程序

Vite 支持多种模板预设，例如：

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts

您还可以通过为名称和模板添加命令行选项，使用一条命令来搭建项目框架。在本教程中，我们将构建一个 Vue 项目。

yarn create @vitejs/app awesomely-fast --template vue
Enter fullscreen mode Exit fullscreen mode

让奇迹发生吧……好吧，它已经安装好了。

Vite项目的结构

您可能首先注意到的是，它index.html不再位于该public文件夹中，而是在根目录中。

这是因为 Vite 将这些文件视为index.html源代码，并将其纳入模块图。与静态 HTTP 服务器类似，Vite 也有一个“根目录”的概念，所有文件都从该目录提供。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

其余结构都相当标准，位于一个src文件夹内，其中包含一个App.vue作为根组件的组件和一个main.js用于引导 Vue 应用程序的组件。

开发服务器

您的package.json版本将包含三个（3）内置脚本：

 "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
Enter fullscreen mode Exit fullscreen mode

快跑吧yarn dev。

开发服务器

没错，冷启动一个开发服务器大约需要344 毫秒。为了让您更直观地了解它的速度，使用 vue-cli 启动开发服务器大约需要一秒半的时间。

冷启动开发服务器时，基于打包器（webpack）的设置必须先抓取并构建整个应用程序，然后才能提供服务。

Vite 首先将应用程序中的模块分为两类，从而缩短开发服务器的启动时间。

  • 依赖项：本质上是纯 JavaScript，在开发过程中不会更改
  • 源代码：是的，你的代码，你所有的 Vue 组件，以及你经常编辑的 CSS。

Vite 通过原生 ESM 提供源代码。这本质上是让浏览器接管了打包器的部分工作。

你还记得<script type="module" />开头的标签吗？那就是使用原生ESM方法。

它是如何运作的？

让我们来看看Network TabVite 应用与vue-cli(webpack)应用的区别。

vue-cli

vue-cli 网络

上图vue-cli将代码分成了两个主要部分：

  • app.js文件包含了你的代码包
  • chunk-vendors.js包含所有来自第三方的代码。

两次请求共加载约2.4 MB 数据，总加载时间为301 毫秒。

屏幕截图 2021-03-03 10.15.52

基于 Bundle 的开发服务器负责将所有模块和各种文件打包成一个静态 Bundle，该 Bundle 通常由 Express 服务器提供服务。类似于这张图片。

基于捆绑包的开发服务器

机箱内部结构越复杂，服务器启动所需的时间就越长。

现在让我们把它和Vite的那个进行比较。

Vite 开发服务器

维特网络

如您所见，Vite 将每个文件（.vue，.js）作为模块加载，能够并行执行，并将总加载时间减少到大约~190ms。

请注意传输的大小，它没有达到1 MB，而捆绑包的大小为2.4MB 。

屏幕截图 2021-03-03 10.19.24

这种速度的秘诀在于原生 ESM 将打包器的部分职责转移给了浏览器本身。它基本上是在浏览器通过 HTTP 请求时按需转换和提供代码。

vite-dev-server

当然，这个比较是在一个只有一个组件的小型应用程序上进行的，我建议你用一个更大/更复杂的应用程序进行同样的比较，你会对结果感到惊讶。

更新缓慢的困境

缓慢更新

在 Vite 出现之前，随着应用程序的演进和组件数量的增加，将它们打包成一个包所需的时间会逐渐增加，这就是为什么许多打包工具在内存中运行构建，而其他工具则使用热模块替换(HMR) 来提高更新之间的速度。

在 Vite 中，HMR 是在原生 ESM 上执行的。当文件被编辑时，Vite 只需要精确地使被编辑模块与其最近的 HMR 边界（通常只是模块本身）之间的链失效，从而确保无论应用程序的大小如何，HMR 更新都能始终保持快速。

这意味着无论你的应用有多大，都不会影响其运行速度。

如果你想查看捆绑包和 Vite 之间真正的速度对比测试，请查看我之前写的这篇文章。

文章已失效

什么？没有用于样式设置的加载器吗？

最让我印象深刻的是，Vite 确实提供了对.scss、.sass、.less、.styl和.stylus文件格式的内置支持。

无需为它们安装加载器或 Vite 特有的插件，但必须安装相应的预处理器本身：

# .scss and .sass
yarn add -D sass

# .less
yarn add -D less

# .styl and .stylus
yarn add -D stylus
Enter fullscreen mode Exit fullscreen mode

这样你就可以专注于真正重要的插件，比如我们将在下一节中介绍的那些插件。

 插件，插件，插件

为了增强您的 Vite 应用，以下是我推荐的一些最佳插件：

 @vitejs/plugin-vue

这是Vite 仓库中打包的官方插件，用于支持 Vue3 SFC 组件。

由于 Vite 与框架无关，因此它是可选的，这很合理。

要使用它，请将以下内容添加到您的……vite.config.js

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()]
}
Enter fullscreen mode Exit fullscreen mode

 antfu/vite-plugin-pwa

GitHub 标志 vite-pwa / vite-plugin-pwa

Vite 的零配置 PWA

提供快速零配置的 PWA 支持

npm i vite-plugin-pwa -D 

yarn add vite-plugin-pwa -D
Enter fullscreen mode Exit fullscreen mode

将其添加到 vite.config.js 中

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      manifest: {
       // content of manifest
      },
      workbox: {
      // workbox options for generateSW
      }
    })
  ]
}
Enter fullscreen mode Exit fullscreen mode

antfu/vite-plugin-md

GitHub 标志 antfu / vite-plugin-md

使用 Vue 实现 Markdown for Vite

这个 Markdown 加载器允许你将 Markdown 用作 Vue 组件，并在 Markdown 文件中使用你的 Vue 组件。

安装

npm i vite-plugin-md -D 

yarn add vite-plugin-md -D
Enter fullscreen mode Exit fullscreen mode

将其添加到 vite.config.js 中

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Markdown from 'vite-plugin-md'

export default {
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // <--
    }),
    Markdown()
  ],
}
Enter fullscreen mode Exit fullscreen mode

antfu/vite-plugin-icons

GitHub 标志 卸载插件/卸载插件图标

🤹 随时随地按需访问数千个图标组件。

在 Vite 中以 Vue 组件的形式访问数千个图标

安装

npm i vite-plugin-icons @iconify/json -D 

yarn add vite-plugin-icons @iconify/json -D
Enter fullscreen mode Exit fullscreen mode

将其添加到 vite.config.js 中

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Icons()
  ],
}
Enter fullscreen mode Exit fullscreen mode 
<script setup>
import IconAccessibility from '/@vite-icons/carbon/accessibility'
import IconAccountBox from '/@vite-icons/mdi/account-box'
</script>

<template>
  <icon-accessibility/>
  <icon-account-box style="font-size: 2em; color: red"/>
</template>
Enter fullscreen mode Exit fullscreen mode

它还支持自动导入。

Nuxt/vite 😍

将 Vite 与 Nuxt 结合使用怎么样？这算是一种替代方案。

GitHub 标志 nuxt / vite

⚡ Vite 与 Nuxt 2 的体验

安装 nuxt-vite：(nuxt >= 2.15.0 is required)

yarn add --dev nuxt-vite
# OR
npm i -D nuxt-vite
Enter fullscreen mode Exit fullscreen mode

添加到 buildModules：

// nuxt.config
export default {
  buildModules: [
    'nuxt-vite'
  ]
}
Enter fullscreen mode Exit fullscreen mode

antfu/vite-plugin-components

还在为手动导入组件而烦恼吗？无需再为此烦恼。

GitHub 标志 卸载/卸载 vue-components

📲 Vue 的按需组件自动导入

npm i vite-plugin-components -D 
#OR 
yarn add vite-plugin-components -D
Enter fullscreen mode Exit fullscreen mode

添加到vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import ViteComponents from 'vite-plugin-components'

export default {
  plugins: [
    Vue(),
    ViteComponents()
  ],
};
Enter fullscreen mode Exit fullscreen mode

就这样。

使用Windics按需使用 Tailwind

GitHub 标志 windicss / vite-plugin-windicss

🍃 Windi CSS for Vite ⚡️

npm i vite-plugin-windicss -D 
#OR 
yarn add vite-plugin-windicss -D
Enter fullscreen mode Exit fullscreen mode 
// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS()
  ],
};
Enter fullscreen mode Exit fullscreen mode 
// main.js
import 'windi.css'
Enter fullscreen mode Exit fullscreen mode

就这些。用 Tailwind CSS 构建应用的方式和构建应用的方式一样，但速度更快！⚡️

如果您想查看更多插件，它们都列在这里。

GitHub 标志 vitejs / awesome-vite

⚡️ 精选的与 Vite.js 相关的精彩内容列表


awesome-vite 存储库的标志

超棒的 Vite.js

一份与Vite.js相关的精彩内容精选列表

惊人的

目录

使用右上角的“目录”菜单浏览列表。

资源

官方资源

开始使用

模板

香草



在 GitHub 上查看


你准备好升级前端工具了吗？

文章来源：https://dev.to/alvarosabu/getting-started-with-vite-2-1f4p
React 与 Vue：如何选择合...
如何运用这种农夫技巧成为一名优秀的...