vite 入门

什么是 Vite

Vite是新一代的前端构建工具
对比于webpack 他更轻更快 能够显著的提升前端的开发体验

它由两部分组成

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

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

简单的说

• 开发环境中，无需打包操作，可快速的冷启动。
• 轻量快速的热重载（HMR）。
• 真正的按需编译，不再等待整个应用编译完成。

简单的对比一下webpack 二者的工作模式

这就是冷打包

话不多说 我们开始实用

创建

根据Vite官网介绍，我们可以使用npm或yarn来初始化Vite项目，并且Node.js的版本需要 >= 12.0.0。

初始化

npm init vite@latest 项目名
yarn create vite 项目名
这边我们使用的是yarn创建一个Vite+Vue的项目
yarn create vite my-vue-app --template vue

创建成功并打开测试一下

我们对比webpack创建的项目看看

打开项目后 我们先初始化
对比于webpack
vite不会给我们初始化
我们需要手动的进行初始化
命令 yarn

接着我们运行代码
命令 yarn dev