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

ssh_晨曦时梦见兮

发布于 2024-01-31 08:08:59

2370

发布于 2024-01-31 08:08:59

文章被收录于专栏：前端从进阶到入院前端从进阶到入院

Vue.js 是用于构建用户界面的渐进式 JavaScript 框架，Vite 是下一代前端构建工具，可显著改善开发体验。

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

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

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

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

技巧 1：将 Bit 组件设置为 Vite 应用程序

Bit 发布了一种名为“Vue Vite 应用类型”的应用类型。这可以让你的 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) 文件是在开发环境中管理环境变量的常用方法。它们是存储键/值对的简单文本文件，可用于自定义应用程序的一些变量。

要在 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 文件的更多信息，请查看此内容。

技巧 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 的更多信息，请参阅此深入指南。

技巧 4：使用新的 Vue 开发工具进行更好的 Vue 开发

Vue Devtools 是用于调试 Vue 应用程序的强大工具。它提供了有关你的应用程序的大量信息，并使识别和解决问题变得更加容易。

最近，它发布了 next 版本 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 的更多信息，请参阅 devtools-next.vuejs.org/guide/featu…

技巧 5：轻松将应用程序部署到云端

将你的 Vue 应用程序部署到云可以让全世界的用户都可以访问它。你可以在 Bit 上轻松实现这一目标。

让我们以 Netlify 为例来部署我们的 TodoMVC。 Netlify 是一个提供托管和 serveless 服务的云平台。

首先，使用此链接注册 Netlify 帐户并申请访问令牌。

接下来，安装 Netlify 的 Bit Deployer：

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 来构建应用程序并将其发布到暂存或生产环境。