Vue开发者的Vite介绍

前端小工
151 阅读5分钟

Vite是一个现代的、精简的、快如闪电的开发工具，以开发者体验为首要考虑。另外，根据Evan You的说法，Vue 3工具的官方建议将从Vue CLI切换到Vite（参考One Year Into Vue 3 Talk [9:00 - 10:20]），这意味着在2022年Vue CLI将成为昨天的工具。因此，现在绝对是你开始使用Vite的时候了!

但你该从哪里开始呢？不用担心!我们已经为你提供了一个关于Vite的全新课程。现在就免费查看介绍性课程，并继续阅读以了解我们在课程中涉及的一些材料。

那么，从上到下学习Vite听起来是不是很兴奋？当然是的!因此，这里有一些你可以期待学习的材料的偷窥。

用Vite开始一个Vue.js项目

当用Vite启动Vue.js项目时，有很多选择，这取决于你的需求。以下是我们在课程中涉及的3种方法。

  1. npm init [[email protected]](https://vueschool.io/cdn-cgi/l/email-protection)-在官方Vite文档中，提供原始的Vue.js项目。
  2. npm init [[email protected]](https://vueschool.io/cdn-cgi/l/email-protection)-提供类似于Vue CLI的交互式CL设置
  3. Vite模板--可以通过有意见的默认值快速启动项目

Vite基础知识

作为一个现代的构建工具，Vite有各种不同的职责，从如何使用样式到处理ES模块以及两者之间的一切。在本课程中，我们将涵盖所有这些主题，包括。

  • 使用样式的工作
    • SFC中的CSS
    • CSS 样式表
    • CSS预处理程序
    • 和CSS模块
  • 静态资产
    • 导入图像
    • 使用new URL ，以获得公共路径
    • 使用base64编码的小图片的内衬
  • JSON
    • 将JSON导入为JavaScript对象
    • 将一个根字段作为一个命名的输出导入
  • Glob导入
    • 基于glob模式动态导入文件
    • 用动态导入的方式进行异步导入
    • 用静态导入同步导入
  • TypeScript
    • 将TypeScript添加到现有的Vite/Vue项目中
    • 在SFC中使用Typescript
  • Vite配置
    • 设置一个@ 的导入别名
    • 以及其他Vite配置选项的样本

这看起来似乎有很多东西要学，但实际上是相当简单的，因为Vite为我们做了很多繁重的工作，使你能够专注于你的实际应用。

Vite的生产构建

虽然Vite在开发过程中因其超快的冷启动和HMR而大放异彩，但如果不能为生产捆绑，它就不是一个完整的构建工具。在Vite项目中，可以通过以下命令来实现这一点。

npm run build

在构建时，Vite使用引擎盖下的捆绑器Rollup将你的ES模块捆绑到一个主要的JavaScript文件中，并将你的异步模块分割成各自的块，只在需要时使用。这在开发中是不必要的，因为Vite利用本地浏览器对ES模块的支持，但是在生产中运送未捆绑的ESM仍然是低效的，所以Vite为你执行了这个传统的捆绑步骤。

环境变量

环境变量是另一个有用的功能，通常用于支持不同的数据源，这取决于你的应用环境和保密性。当然，Vite也支持它们。

你可以在Vite项目中通过以下方式访问环境变量

import.meta.env

你可以像在典型的节点环境、托管平台界面或Vite支持的任何特殊文件中那样设置环境变量。

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

Vite还通过要求在捆绑的应用程序中包含任何变量的前缀VITE_ ，来帮助你防止意外地将秘密环境变量暴露给客户端。

从Vue CLI迁移到Vite

接下来，由于Vue CLI已经是Vue的官方推荐版本，有很多人的项目都是从Vue CLI开始的，用Vue CLI管理，用Webpack构建/开发的。为了赶上最新的工具，并从Vite的超快开发体验中获益，许多人希望将他们的Vue CLI项目迁移到Vite。

虽然每个Vue CLI项目都不一样，这取决于所包含的依赖关系和所选择的方法，但所有开发人员都需要采取一些标准步骤来迁移他们的项目。这9个步骤将使你在迁移过程中走得更远，甚至可能是你所需要的全部。

  1. 更新依赖关系
  2. 只对现代浏览器提供支持
  3. 添加Vite配置
  4. 移动index.html
  5. 更新脚本
  6. 更新环境变量
  7. 为SFC导入添加.vue扩展名
  8. 清理神奇的注释
  9. 享受更快、更无缝的开发体验

在课程中，以及这篇专门的博文中，我们将详细介绍每个步骤。

让Vite在不同的项目中更容易重复使用

最后，根据你在项目间跳转的频率或新项目的启动频率，你可以采取一些步骤，使Vite在这些项目间更易于重复使用。

这些策略包括

  1. 使用现有的Vite项目模板
  2. 创建你自己的Vite项目模板
  3. 使用现有的Vite插件
  4. 创建你自己的Vite插件

在课程中，我们将详细介绍每一种策略，在课程结束时，你将拥有自己的自定义模板，并与TailwindCSS、ESLint、Prettier、Vue Router和@ ，以及一个自定义的简单markdown到Vue组件插件相连接。

总结

Vite是Vue开发工具的未来。因此，你应该准备好使用它。不仅如此，我向你保证，在使用Vite的短短几天内，你会发现自己等待的时间更少，编码更多，精神上的颠簸更少，整体上的开发流程更好。让我们来帮助你开始使用Vite，

avatar
文章
阅读
粉丝