Vite文檔詳解

一、快速入門

Vite是一款基於ESM的構建工具，將項目中的所有模塊打包成一個個JS文件，支持開箱即用的現代Web開發體驗。

使用Vite創建新項目非常簡單：首先需要安裝Vite，然後通過以下命令初始化項目：

npm init vite-app <project-name>
cd <project-name>
npm install

接下來，運行以下命令啟動開發伺服器：

npm run dev

啟動成功後，會看到類似下面的輸出信息：

$ vite
  vite v2.7.6 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose

二、高效的熱重載

Vite提供了非常高效的熱重載功能，無需重新打包整個項目，只需重新編譯修改的模塊即可，大大提高了開發效率。

在使用Vite開發項目時，只需要修改代碼並保存，就能看到修改後的效果，非常方便。

以下是一個示例：

// app.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

如果此時我們在App.vue中修改了內容並保存，Vite將會在控制台輸出以下信息：

[vite] hot updated: App.vue

保存之後頁面也會自動更新，非常快速。

三、內置的開箱即用

Vite內置了對Vue、React和Svelte等框架的支持，對ES6模塊和CSS等現代Web技術也有著很好的支持。

以下是一個使用Vue創建應用的示例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

在頁面中可以直接使用Vue組件：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

Vite會根據文件的類型自動解析依賴關係，並將頁面自動優化和拆分為單獨的JS文件，以提高載入速度。

四、針對生產環境的優化

Vite通過內置的Rollup構建工具和自定義插件，為生產環境提供了一些優化手段，例如壓縮JS代碼、代碼分割和按需引入等。

在打包生產環境時，只需運行以下命令：

npm run build

打包成功後，會生成dist目錄，其中包含了最終的頁面代碼。可以使用Vite提供的serve命令進行本地預覽：

npm run serve

在生產環境中，Vite還提供了靜態資源緩存、預載入和預渲染等功能，以進一步提高頁面的性能和用戶體驗。

五、插件系統

Vite提供了一套完整的插件系統，可以通過插件來擴展Vite的功能。

以下是一個常用的插件：

// vite-plugin-svg-icons
import SvgIconsPlugin from 'vite-plugin-svg-icons';

export default defineConfig({
  plugins: [
    SvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[name]'
    })
  ]
});

該插件可以幫助我們添加SVG圖標，並自動生成對應的Vue組件。

通過插件擴展Vite的功能，可以大大提高開發效率。

六、自定義模板

在使用Vite創建新項目時，可以根據自己的需求選擇不同的模板。

以下是一個使用預設模板創建Vue項目的示例：

npm init vite@latest <project-name> --template vue

預設模板中包含了常用的配置和依賴項。

如果需要使用自定義的模板，可以在控制台輸入以下命令創建模板：

npm init vite@latest my-vue-template --template empty

創建之後，可以在模板文件中自定義項目結構和配置。