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

当然啦
  
  
  
  
  
  
 ，也有完整的  
  
  
  
  
  
 ，自己拉代码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