Vite 是一個(gè)基于原生 ES 模塊并集成大量預(yù)配置功能的前端打包工具。它不只適用于 Vue.js，而是一個(gè)通用工具。
Vite 的優(yōu)點(diǎn)是快，相當(dāng)快，并且預(yù)先內(nèi)建了很多常用功能，一般項(xiàng)目基本不用關(guān)心配置，開(kāi)包即用，節(jié)約大量生命。
一、使用預(yù)設(shè)模版（下面都以 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、然后選取各種預(yù)設(shè)模板：
- vanilla
- vanilla-ts
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
- svelte
- svelte-ts
二、手動(dòng)安裝 Vite（適用于手寫(xiě)前端項(xiàng)目）：
1、安裝：
$ npm i -D vite
2、根目錄新建 package.json 文件：
{
"scripts": {
// 由于 vite 通過(guò) -D 安裝，vite 命令不能全局使用，如果不添加該腳本，則只能通過(guò) npx vite 開(kāi)啟開(kāi)發(fā)服務(wù)器
// npm run dev 開(kāi)啟 dev 服務(wù)器
"dev": "vite",
// npm vite build 編譯文件，默認(rèn)為 /dist 目錄
"build": "vite build"
}
}
3、安裝 CSS 預(yù)處理器（以 Less 為例）：
// vite 中已經(jīng)配置好了各種預(yù)處理器，只用安裝相應(yīng)處理器就完事
$ npm i -D less
4、Typescript 由 vite 集成的 esbuild 編譯，速度相當(dāng)快，直接用
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 文件中引入 靜態(tài)資源 、樣式文件
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/
