Vite 是一个基于原生 ES 模块并集成大量预配置功能的前端打包工具。它不只适用于 Vue.js，而是一个通用工具。
Vite 的优点是快，相当快，并且预先内建了很多常用功能，一般项目基本不用关心配置，开包即用，节约大量生命。
一、使用预设模版（下面都以 npm 为例）:
1、安装：
$ npm init @vitejs/app
2、使用模板：
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue
3、然后选取各种预设模板：
- vanilla
- vanilla-ts
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
- svelte
- svelte-ts
二、手动安装 Vite（适用于手写前端项目）：
1、安装：
$ npm i -D vite
2、根目录新建 package.json 文件：
{
"scripts": {
// 由于 vite 通过 -D 安装，vite 命令不能全局使用，如果不添加该脚本，则只能通过 npx vite 开启开发服务器
// npm run dev 开启 dev 服务器
"dev": "vite",
// npm vite build 编译文件，默认为 /dist 目录
"build": "vite build"
}
}
3、安装 CSS 预处理器（以 Less 为例）：
// vite 中已经配置好了各种预处理器，只用安装相应处理器就完事
$ npm i -D less
4、Typescript 由 vite 集成的 esbuild 编译，速度相当快，直接用
5、示例文件：
index.html 为根目录入口文件：
<html>
<title>Title</title>
<style lang="less">
body {
background-color: red;
p {
font-size: 20px;
}
}
</style>
<body>
<p>Hello world</p>
<div id="pic"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
main.ts：
// 在 ts / js 文件中引入 静态资源 、样式文件
import imgSrc from '/src/image/pic.png';
import '/src/styles/otherStyles.less';
document.getElementById('pic').innerHTML = `<img src="{$imgSrc}" alt="picture"/>`;
其它更多配置可以参考官方文档：https://cn.vitejs.dev/guide/
