现代 Vue 和 Vite 开发：最佳实践和技巧
Vue.js 是用于构建用户界面的渐进式 JavaScript 框架，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 生态系统
以下是我们建议探索的一些资源：
Volar[10]：专门为 Vue 3 构建的语言支持插件。
VueUse[11]：基本 Vue Composition API 的集合。
Pinia[12] 和 Vue Router[13]：官方对 Vue 应用程序的状态管理和路由支持。
Bit 的 VSCode 扩展[14]：通过增强的生产力功能和集成的 VS Code 源代码控制支持来改善你的组件开发体验。
结论
上述最佳实践和技巧可以帮助你改进开发工作流程并提高工作效率。
掌握 Vue 和 Vite 的关键在于不断学习和实践。
利用 Bit 和 Vue 生态系统中的可用资源，不要害怕尝试并与社区分享你的见解。
快乐的 Coding 吧！
我是 ssh，工作 6 年+，阿里云、字节跳动 Web infra 一线拼杀出来的资深前端工程师 + 面试官，非常熟悉大厂的面试套路，Vue、React 以及前端工程化领域深入浅出的文章帮助无数人进入了大厂。 欢迎 长按图片加 ssh 为好友，我会第一时间和你分享前端行业趋势，学习途径等等。2023 陪你一起度过！
参考地址：https://blog.bitsrc.io/vue-js-with-vite-best-practices-and-tips-c60fcb9491cf
作者：Jinjiang Zhao
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