Hi 👋
本周的问题中，您将学习如何在Vue 3中自动导入组件。
这个话题是有争议的，如果组件自动导入。你只需要在你的模板中引用它们，它们就可用了。无需手动导入。这个特性在Nuxt 3中被大量使用。
我将向您展示如何在Vue 3中使用unplugin-vue-components实现此功能。
首先，安装plugin：
npm i unplugin-vue-components -D
接下来，将其添加到您的vite.config.ts：
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
plugins: [
Components({ /* options */ }),
],
})
现在，您可以在模板中引用组件，而无需手动导入它们：
<script setup lang="ts">
// 👇🏻不再需要手动导入
// import HelloWorld from './src/components/HelloWorld.vue'
</script>
<template>
<div>
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</div>
</template>
😂 轻松一刻
🧑🏻💻其他新闻
📕发布TypeScript 5.3
-
👉🏻新的收缩改进 -
👉🏻更多的正确性检查 -
👉🏻导入属性 -
👉🏻方便的新编辑器功能 -
👉🏻大量的优化
📕从混乱到有序：构建你自己的 Monorepo
-
👉🏻本文概述了构建一个简单的monorepo的步骤，包括组织代码和采用分支策略，如基于主干的开发。
📕构建现代Web应用程序：5个基本的前端架构原则
-
👉🏻异步或延迟加载 -
👉🏻Tree-Shake -
👉🏻性能预算 -
👉🏻Web标准 -
👉🏻使用新框架
📕 如何进行 TypeScript 转换
-
👉🏻解决一个非常常见的问题：按需执行还是遵循依赖关系图？
🛠️Shots
-
👉🏻这个工具包含了你为产品和应用程序拍摄创建模型所需的一切。
🛠️网站截图
-
👉🏻一个Puppeteer包装器，用于从Node或命令行捕获站点的屏幕截图。
🛠️draw-a-ui
-
👉🏻它使用tldraw和GPT-4 Vision API从绘制的线框生成HTML。 -
👉🏻它采用PNG图像并使用GPT-4处理该图像，以使用Tailwind CSS创建HTML文件。
原文翻译自 Weekly Vue News #121 Automatically Import Components，作者：Michael Hoffmann， 略有删改。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
最后不要忘了点个赞再走噢
原文始发于微信公众号（南城大前端）：Vue 官方周报 #121 – 自动导入组件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/179582.html
