vite 开发入门

灰太狼 2022-09-10 13:15 209阅读 0赞

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
Vite 意思是轻快的意思。它和我们以前使用Vue-cli的作用基本相同，都是项目初始化构建工具，相当于Vue项目构建的第二代产品，当然它也包含了项目的编译功能。需要注意一下Vite的生产环境下打包是通过Rollup来完成的，

> Rollup是JavaScriptd的模块bundler(打包器)，可以将一小段代码编译为更大或更复杂的内容，例如库或应用程序。

**Vite 提供的是开发环境中的编译，打包工作是依靠的 Rollup。**

### Vite特性介绍 ###

*  轻快冷服务启动。冷服务的意思是，在开发预览中，它是不进行打包的。
 *  开发实现热更新，也就是说在你开发的时候，只要一保存，结果就会更新。
 *  按需进行更新编译，不会刷新全部DOM节点。加快开发流程度。

npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev

![在这里插入图片描述][54e5b923d6b2febe138d3decf15c893b.png_pic_center]

Vite 生成的目录结构

开发的过程和开发 Vue 项目基本上是差不多的。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5reY5reY5piv5Y-q54uX_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/785f128b30eb4dd4ab16ee24ef7709e0.png
[54e5b923d6b2febe138d3decf15c893b.png_pic_center]: /images/20220829/f80f712bbc2d4d19b25c6bbf31f64379.png