这是我参与「第四届青训营 」笔记创作活动的第3天，今天的主要内容是关于vite知识点的简单总结。

一. vite知识点概括

1. vite的简单介绍
2. vite的初步应用
3. vite的脚手架

二. Vite知识点的详细概述

1. Vite的简单介绍和认识

   • 到目前为止，Webpack是前端所用到的最多的构建工具，但除了Webpack之外也有其他的一些构建工具，比如parcel，Vite等，因此Vite就是一个构建工具，它被官方定义为 下一代前端开发和构建工具

   • 而构建工具的作用就是将我们写的一些代码，比如VUE，Typescrip等，一些不能被浏览器所识别的文件，对这些代码进行编译和转换，而随着项目的越发复杂和庞大，即JS的增多，模块的变多等情况，构建工具需要很多时间来开启服务器，因此就出现了Vite。

2. Vite的安装和初步应用

   • Vite的安装

            1.  npm install vite -g //全局安装 
            2.  npm install vite -D //局部安装
     

   • 使用Vite来启动项目

            npx vite
     

     此时打开浏览器，使用ctrl+Shift+i可以发现所需要加载的文件数量大大的减少了。

   • Vite对各种文件的支持

     • 对于css文件来说，直接在主文件中引入即可。
     • 对于less文件来说，使用 *npm install less -D * 来安装less，这样就可以直接导入less文件了。
     • 对postcss文件，只需要安装postcss，并且在postcss.config.js中配置相应的插件即可。

            npm install postcss -D  //安装postcss
            
            npm install postcss-preset-env -D  //引入相关插件
            
            //最后新建一个postcss.config.js文件
            module.exports = { plugins:[ require("postcss-preset-env") ] }
            
       

3. Vite脚手架
   • 在开发中我们不会从头开始搭建Vite。此时我们应该考虑使用vite脚手架工具 @vitejs/create-app。
   • 使用脚手架

              npm install @vitejs/create-app -g  //安装脚手架
              
              create-app 项目名称 //直接创建你的项目
              
     

三. 总结

通过当天的直播和课后的再次复习，并在网络上查找了Vite的相关资料。初步了解了关于Vite的相关知识点，大致明白了Vite的执行流程，明白了它的速度为何很快。