現代 Vue 和 Vite 開發：最佳實踐和技巧

Vue.js 是用於構建用戶界面的漸進式 JavaScript 框架，Vite 是下一代前端構建工具，可顯著改善開發體驗。

它們共同爲現代 Web 開發提供了強大的組合。更棒的是，Bit[1] 現在支持在 Vite 中開發 Vue 應用程序。

這種集成進一步增強了開發體驗，提供了更流暢、更高效的工作流程。

因此，本文將探討一些最佳實踐和技巧，以提高 Bit 上的 Vue 開發人員的生產力和效率。

但是，在詳細介紹之前，我們將通過 Bit Cloud 上一個名爲 TodoMVC[2] 的真實現有應用程序來介紹所有技巧。

今天要構建內容的 Bit 依賴圖

技巧 1：將 Bit 組件設置爲 Vite 應用程序

Bit 發佈了一種名爲 “Vue Vite 應用類型”[3] 的應用類型。這可以讓你的 Vue 應用程序與 Vite 一起運行，開箱即用。要將其應用到你的 Vue 應用程序，請按照下列步驟操作：

首先，安裝 Vue Vite 應用程序類型：

bit install @bitdev/vue.app-types.vue-vite-app-type

然後，爲你的應用程序創建 index.html 並連接你的進一步應用程序實現：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My Todo App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- write your further implementation in `app-vite.root.ts` -->
    <script type="module" src="app-vite.root.ts"></script>
  </body>
</html>

最後，創建一個 bit 應用程序文件 app-vite.bit-app.ts 作爲應用程序配置並導入應用程序類型：

import { VueApp } from "@bitdev/vue.app-types.vue-vite-app-type";

export default VueApp.from({
  name: "todomvc-vite",
});

現在你可以運行新應用程序並打開瀏覽器進行預覽：

# register the new app on the workspace
bit use app-vite
# run the new app with the name we setup
bit run todomvc-vite
# open <http://localhost:3000/> to preview

技巧 2：使用 dotenv 文件自定義局部變量

Dotenv (.env)[4] 文件是在開發環境中管理環境變量的常用方法。它們是存儲鍵 / 值對的簡單文本文件，可用於自定義應用程序的一些變量。

要在 Vue 應用程序中使用 Vite 中的 dotenv 文件，只需在應用程序中創建一個 .env 文件並添加所需的變量即可。Vite 將自動加載這些變量並使它們在你的應用程序中可用。

例如，TodoMVC 應用程序的數據使用默認鍵 vue-todomvc 存儲在本地存儲中。你可以看到數據在開發工具中存儲爲此鍵。

現在讓我們通過環境變量設置密鑰。

首先，我們創建一個 .env 文件並添加一個帶有 VITE_ 前綴的密鑰

VITE_STORAGE_KEY="my-vite-todomvc"

現在，你可以通過 import.meta.env.VITE_STORAGE_KEY 在源代碼中訪問此變量。

其次，找到指定本地存儲鍵來保存數據的代碼。它位於 app-vite.init.ts 第 10 行：

const STORAGE_KEY = "vue-todomvc";

讓我們將其更改爲：

const STORAGE_KEY = import.meta.env.VITE_STORAGE_KEY || "vue-todomvc";

現在再次打開開發工具，數據將存儲爲密鑰 my-vite-todomvc。

有關 Vite 中 dotenv 文件的更多信息，請查看此內容 [5]。

技巧 3：添加自定義 Vite 配置

Vite 還允許你自定義其配置以更好地滿足你項目的需求。你只需創建一個 vite.config.ts 或 vite.config.js 文件即可實現此目的。

例如，你可能想爲應用程序設置自定義 base URL。現在我們創建一個 vite.config.ts 文件並添加值爲 /my-vite-todomvc-app/ 的基本屬性。

import { defineConfig } from "vite";

export default defineConfig({
  base: "/my-vite-todomvc-app/",
});

現在你可以看到你的應用程序的 URL 已經變成了 http://localhost:3000/my-vite-todomvc-app/

有關配置 Vite 的更多信息，請參閱此深入指南 [6]。

技巧 4：使用新的 Vue 開發工具進行更好的 Vue 開發

Vue Devtools 是用於調試 Vue 應用程序的強大工具。它提供了有關你的應用程序的大量信息，並使識別和解決問題變得更加容易。

最近，它發佈了 next 版本 https://devtools-next.vuejs.org/。

將其添加爲 Vite 插件可以顯着改善你的開發工作流程：

首先，安裝 Vue 開發工具：

bit install vite-plugin-vue-devtools

然後，將這個新的 DevTools 作爲 Vite 插件添加到 vite.config.ts 中：

import { defineConfig } from "vite";
import VueDevTools from "vite-plugin-vue-devtools";

export default defineConfig({
  base: "/my-vite-todomvc-app/",
  plugins: [VueDevTools()],
});

然後，重新運行應用程序並通過終端日誌查看 DevTools 的運行情況。你可以通過 http://localhost:3000/my-vite-todomvc-app/devtools/ 訪問它。這使你可以檢查 Vue 組件和應用程序結構並更有效地執行其他調試任務。

有關 Vue DevTools 的更多信息，請參閱 https://devtools-next.vuejs.org/guide/features。

技巧 5：輕鬆將應用程序部署到雲端

將你的 Vue 應用程序部署到雲可以讓全世界的用戶都可以訪問它。你可以在 Bit 上輕鬆實現這一目標。

讓我們以 Netlify 爲例來部署我們的 TodoMVC。Netlify[7] 是一個提供託管和 serveless 服務的雲平臺。

首先，使用此鏈接 [8] 註冊 Netlify 帳戶並申請訪問令牌。

接下來，安裝 Netlify 的 Bit Deployer[9]：

bit install @teambit/cloud-providers.deployers.netlify

然後，將部署功能添加到應用程序配置文件 app-vite.bit-app.ts

import { VueApp } from "@bitdev/vue.app-types.vue-vite-app-type";
import { Netlify } from "@teambit/cloud-providers.deployers.netlify";

const netlifyConfig = {
  // The slug of your Netlify profile.
  team: "<your-slug>",
  // The access token of your Netlify profile.
  accessToken: process.env.NETLIFY_AUTH_TOKEN || "",
  // The name of the site to deploy to when bit tag.
  productionSiteName: "<your-site-name>",
  // The name of the staging site to deploy to when bit snap. (optional)
  stagingSiteName: "<your-staging-site-name>",
};

export default VueApp.from({
  name: "todomvc-vite",
  deploy: Netlify.deploy(netlifyConfig),
});

現在，你可以運行 bit snap 或 bit tag 來構建應用程序並將其發佈到暫存或生產環境。

例如，這是我部署到 Netlify 的應用程序：https://staging-todomvc-app-vue-bit.netlify.app/

進一步建議：深入瞭解 Bit 和 Vue 生態系統

以下是我們建議探索的一些資源：

  1. Volar[10]：專門爲 Vue 3 構建的語言支持插件。

  1. VueUse[11]：基本 Vue Composition API 的集合。

  1. Pinia[12] 和 Vue Router[13]：官方對 Vue 應用程序的狀態管理和路由支持。

  1. Bit 的 VSCode 擴展 [14]：通過增強的生產力功能和集成的 VS Code 源代碼控制支持來改善你的組件開發體驗。

結論

上述最佳實踐和技巧可以幫助你改進開發工作流程並提高工作效率。

掌握 Vue 和 Vite 的關鍵在於不斷學習和實踐。

利用 Bit 和 Vue 生態系統中的可用資源，不要害怕嘗試並與社區分享你的見解。

快樂的 Coding 吧！

參考地址：https://blog.bitsrc.io/vue-js-with-vite-best-practices-and-tips-c60fcb9491cf

作者：Jinjiang Zhao

參考資料

[1]

Bit: https://bit.dev/

[2]

TodoMVC: https://bit.cloud/learnbit-vue/todomvc/app

[3]

“Vue Vite 應用類型”: https://bit.cloud/bitdev/vue/app-types/vue-vite-app-type

[4]

Dotenv (.env): https://github.com/motdotla/dotenv

[5]

請查看此內容: https://vitejs.dev/guide/env-and-mode.html#env-files.

[6]

此深入指南: https://vitejs.dev/config/

[7]

Netlify: https://www.netlify.com/

[8]

此鏈接: https://docs.netlify.com/cli/get-started/#obtain-a-token-in-the-netlify-ui

[9]

Bit Deployer: https://bit.cloud/teambit/cloud-providers/deployers/netlify

[10]

Volar: https://marketplace.visualstudio.com/items?itemName=Vue.volar

[11]

VueUse: https://vueuse.org/

[12]

Pinia: https://pinia.vuejs.org/

[13]

Vue Router: https://router.vuejs.org/

[14]

Bit 的 VSCode 擴展: https://marketplace.visualstudio.com/items?itemName=bit.vscode-bit

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/cOqbDJkC7ZObIPpkIa3c9Q

猜你喜歡