Vue 官方周报 #121 - 自动导入组件

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）