vite入门/徒手搭建vite/配置vite/使用vite脚手架/vite步骤

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

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

文章有点长，你忍一下

一、了解一下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

Vite要求Node版本是大于12版本的

这里纠正一下版本，中文官网写12，英文官网写14，去github上看写14，当然高一点好，但不要最新

首先我们安装一下，npm install vite –D ----------局部安装

然后跑一下项目，npx vite（执行的是node_module/bin/vite）

然后按住ctrl+左键，点蓝色链接（前面我们是用live serve打开的，现在我们是用vite跑）

构建完成后，有几个区别

1.可以不用加后缀了，如果用webpack就他给我们加后缀，如果用原生esmodule就要自己加后缀，现在我们用vite也不用加后缀

2.可以省略长的路径了，即引用node_module的文件，直接写里面那个就就行了，例：/node_module/vue-loader,直接写“vue-loader”

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对vue提供第一优先级支持：

pVue 3 单文件组件支持：@vitejs/plugin-vue

pVue 3 JSX 支持：@vitejs/plugin-vue-jsx

pVue 2 支持：underfin/vite-plugin-vue2

这里我们是vue3单文件

我们先安装一下vue3，npm i vue@next -D

安装一下支持vue3插件，
npm install @vitejs/plugin-vue -D

安装一下支持vue后缀的插件，npm i @vue/compiler-sfc -D

然后新建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