现代 Vue 和 Vite 开发：最佳实践和技巧

它们共同为现代 Web 开发提供了强大的组合。更棒的是，Bit^[1] 现在支持在 Vite 中开发 Vue 应用程序。

这种集成进一步增强了开发体验，提供了更流畅、更高效的工作流程。

因此，本文将探讨一些最佳实践和技巧，以提高 Bit 上的 Vue 开发人员的生产力和效率。

但是，在详细介绍之前，我们将通过 Bit Cloud 上一个名为 TodoMVC^[2] 的真实现有应用程序来介绍所有技巧。

技巧 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