以下内容全部以图片形式展示（自己动手尝试一下印象岂不是更深？）

当然啦
  
  
  
  
  
 ，也有完整的  
  
  
  
  
  ，自己拉代码https://github.com/ispaomoya/build-vite.git

文章有点长
 


 


 


 


 


 

，你忍一下

目录

一            、了解一下webpack和vite

二
  
 
  
 
  
 
  
 
  
 
  
、vite起步

2.1安装vite

2.2vite对css处理

2.3vite对less处理

2.4安装postcss

三










、安装vue

 四 
  
  
  
  
  
 、vite打包项目

4.1采用npx打包

4.2vite用npm打包

 五
  
  
  
  
  
 、vite脚手架

结尾有彩蛋哈
 
 
 
 
 
，如果你看到这的话

一
 


 


 


 


 


 
、了解一下webpack和vite

webpack就不用说了（不懂的话   
   
   
   
   
   ，这里有传送门）

徒手搭建webpack/配置webpack步骤/从0到1配置webpack/vuecli配置_ispaomoya博客-CSDN博客

vite它基于原生ES模块提供了丰富的内建功能
 

 

 

 

 

 
，HMR的速度非常快速

一套构建指令

 

 

 

 

 

，它使用rollup打开我们的代码            ，并且它是预配置的
 
 

 
 

 
 

 
 

 
 

 
 ，可以输出生成环境的优化过的静态资源

目前webpack还是强的











，vite也很厉害                 ，但是vite还是需要一点时间

二 
 
 
 
 
 
、vite起步

我们是从0开始体验vite

先写目录结构

 然后ctrl+~ 
 
 
 
 
 
 
 
 
 
 
 ，1

















，npm init 初始化           ，2  
 
  
 
  
 
  
 
  
 
  
 ，自定义一个名字（我直接用文件夹的名字了）3一路回车

然后在index.html页面











，右键live serve跑一下（live serve是什么看第一点webpack传送门）

2.1安装vite

2.2vite对css处理

 可见vite自动帮我们处理了css

2.3vite对less处理

在vite中不再需要安装less-loader
  
  
  
  
  
 ，但是还是要安装一下less

首先  
  
  
  
  
  ，编写less文件
 


 


 


 


 


 

，然后安装一下
 
 
 
 
 
，npm i less -D

2.4安装postcss

 下面的配置我就不讲了   
   
   
   
   
   ，不懂为什么看第一点（webpack传送门）

安装一下
 

 

 

 

 

 
，npm install postcss postcss-preset-env -D

 配置postcss.config.js文件

 

 

 

 

 

，然后验证

vite默认对ts也是支持的            ，这里就不验证了

三
   
   
   
   
   
  、安装vue

 四
 

 

 

 

 

 
、vite打包项目

4.1采用npx打包

执行以下打包命令

















，npx vite build

然后会在根目录下生成一个dist文件加如下图

如果你想看一下打包后的样子           ，可以在dist/idnex.html中右键点击live serve（方法一）

方法二

vite也有一个命令  
 
  
 
  
 
  
 
  
 
  
 ，可以查看打包后的内容











，在终端输入npx vite preview

4.2vite用npm打包

ok
  
  
  
  
  
 ，vite就讲到这

 五 

 

 

 

 

 
、vite脚手架

下面的内容是创建整个vite

 然后安装一下依赖  
  
  
  
  
  ，npm i

然后跑一下
 


 


 


 


 


 

，npm run dev

再次更新------------我是更新分割线----------------------------------------------------------------------------------

现在vite出到3.2x了
 
 
 
 
 
，给一个官网地址Vite中文网   
   
   
   
   
   ，现在是这样安装vite

得到的结果是....

好啦就到这里啦
 

 

 

 

 

 
，这个目录结构自己看一下就好啦

结尾有彩蛋哈

 

 

 

 

 

，如果你看到这的话

彩蛋就是：给大家上官方文档链接            ，下面的都是vite3
 
 

 
 

 
 

 
 

 
 

 
 ，现在已经很方便了

中文的

开始 | Vite 官方中文文档

英文的

Getting Started | Vite