vue vite文档_Vue.js构建工具比较

构建工具是开发人员工作流程中不可或缺的一部分，单页应用程序（SPA）和现代JavaScript（ES6）的兴起使JavaScript构建工具激增。

术语“构建工具”用于描述使用包、工具、库和预设模板自动完成简单的重复性任务的过程。

构建工具包括各种不同的工具，例如：

• 任务执行
• 转换器
• 模块打包
• Lint
• 包管理
• 开发服务器
• 脚手架工具

这些工具可帮助开发人员高效地构建并使开发过程更加顺畅。

在本文中，我将比较在Vue.js生态系统中可用的用于高效构建项目的搭建构建工具，它们提供了什么，它们如何改进开发工作流，以及如何开始使用它们。

---

1.先决条件

本教程假定读者具备以下条件：

• Node.js 10x 或者更高版本
• 安装了Yarn或者NPM
• JavaScript的基本知识以及框架如何工作
• Vue.js的基础知识

2.脚手架工具

脚手架工具是建立在一些构建工具之上的抽象，最主要的是开发服务器/模块捆绑器，它们消除了配置和使用构建工具的麻烦。

脚手架工具可以帮助你动态地引导你创建新项目，你不必担心配置问题。

脚手架工具还包括项目的配置选项、为未来项目保存配置预置的能力，以及升级使用它们构建的项目依赖关系的机制。

我们将比较的Vue社区中可用于脚手架应用程序和库的工具是：

• Vite
• Vue CLI
• Poi
• Bili

3.什么是Vite？

Vite，最初只是作为Vue单文件组件(SFC)的开发服务器，是一个利用原生ES模块导入的无捆绑JavaScript开发服务器。

create-vite-app 是一个用于引导新的Vite项目的模板，使用create-vit-app，你不必安装Vue包，因为它作为默认的启动器与Vue捆绑在一起，你可以安装其他应用的依赖。create-vite-app还支持其他框架，例如React和Preact。也可以使用 —template 标志配置要使用的模板。

重要的是要注意，Vite仍处于试验阶段，正在努力使其适合生产。最好不要在关键项目上使用它，直到它变得稳定为止。

Vite还不向后兼容，因此它不支持Vue 2以外的任何其他Vue.js版本。

Vite包含了一个令人难以置信的快速热模块替换(HMR)，你的文件变化几乎会立即反映在浏览器中，它也有开箱即用的支持TypeScript，.tsx 和 .jsx 文件，使用esbuild进行移植，CSS预处理器，PostCSS和CSS模块。

Vite的其他功能包括：

• Asset URL处理
• 支持CSS预处理器，PostCSS和CSS模块
• 支持模式选项和环境变量
• 在项目的 base/root 目录下或当前工作目录下用 vite.config.js 或 vite.config.ts 文件扩展默认值
• 支持插件
• 支持自定义文件转换

你可以在此处阅读有关Vite的更多信息。

4.什么是Vue CLI？

Vue CLI是基于Webpack构建的用于项目的官方Vue.js脚手架工具，它可以避免开发人员为项目配置和设置构建过程的麻烦。它提供了一个有组织的代码结构，并帮助你选择在应用程序中需要的工具，同时它负责配置，并让你专注于编写为项目提供支持的代码。

它还具有对Babel，TypeScript，ESLint，PostCSS和CSS预处理器，渐进式Web应用程序（PWA），单元测试和端到端测试的现成支持。它还具有基于插件的可扩展体系结构，该体系结构允许开发人员构建，共享和使用插件来解决特定问题。

你还可以在项目的脚手架过程中使用Vue Router添加路由，并使用Vuex添加状态管理，并且开箱即可使用热模块替换（HMR）。其他一些值得注意的功能是：

• 支持模式和环境变量
• 使用 vue.config.js 或 vue.config.ts 配置文件来修改默认的webpack配置，从而实现扩展性。
• 适合喜欢使用GUI的开发人员的图形用户界面

5.什么是Poi？