入门篇三：Nuxt4组件自动导入：写代码少敲一半字

目录一、组件自动导入二、组件命名规则三、动态导入组件四、Composables 自动导入五、工具函数自动导入六、第三方库的自动导入七、查看自动导入列表总结你有没有算过一个 Vue 项目里有多少行import语句组件要 import、组合式函数要 import、工具函数还要 import……写着写着文件顶部的 import 区比业务代码还长。Nuxt 带来了一个让人幸福感爆棚的功能——组件自动导入。不用写 import直接用一、组件自动导入Nuxt 会自动扫描components目录下的组件注册后就能直接在模板中使用。创建components目录和一个组件mkdir components创建components/MyButton.vuetemplate button classmy-button slot / /button /template style scoped .my-button { padding: 0.5rem 1rem; background: #00dc82; color: white; border: none; border-radius: 4px; cursor: pointer; } .my-button:hover { background: #00b36b; } /style然后在pages/index.vue中直接使用template div h1首页/h1 !-- 无需 import直接使用 -- MyButton点我/MyButton /div /template完全不需要写 import 语句Nuxt 自动帮你搞定了。二、组件命名规则组件的命名由文件路径决定文件路径组件名称components/MyButton.vueMyButtoncomponents/user/Avatar.vueUserAvatarcomponents/blog/Post/Card.vueBlogPostCard可以看到目录层级会变成 PascalCase 前缀。这个设计很聪明避免了组件命名冲突。如果你想用不同的命名方式可以在nuxt.config.ts中配置export default defineNuxtConfig({ components: [ { path: ~/components, pathPrefix: false // 关闭路径前缀 } ] })这样components/user/Avatar.vue就直接叫Avatar了。三、动态导入组件有些组件比较重比如图表、富文本编辑器不需要在首屏加载。可以用Lazy前缀实现懒加载template div !-- 普通导入页面加载时就加载组件 -- MyButton普通按钮/MyButton !-- 懒加载组件进入视口时才加载 -- LazyChart v-ifshowChart / !-- 还可以给懒加载组件加 loading 状态 -- LazyEditor hydrate-on-visible template #fallback div classloading编辑器加载中.../div /template /LazyEditor /div /template懒加载对首屏性能优化很有帮助尤其是组件很多的大项目。四、Composables 自动导入除了组件Nuxt 的组合式函数也能自动导入。在项目根目录创建composables目录mkdir composables创建composables/useCounter.tsexport const useCounter () { const count ref(0) const increment () count.value const decrement () count.value-- return { count, increment, decrement } }在任意组件中直接使用script setup langts // 无需 import直接用 const { count, increment, decrement } useCounter() /script template div p计数{{ count }}/p button clickincrement1/button button clickdecrement-1/button /div /templateNuxt 内置的 Composables 也能直接用比如useRoute()- 获取路由信息useRouter()- 编程式导航useState()- 跨组件状态共享useFetch()- 数据获取useHead()- 修改页面 head这些都不用 import开箱即用。五、工具函数自动导入工具函数放在utils目录也能自动导入创建utils/format.tsexport const formatDate (date: Date) { return date.toLocaleDateString(zh-CN, { year: numeric, month: long, day: numeric }) } export const formatPrice (price: number) { return ¥${price.toFixed(2)} }在组件中script setup langts const now new Date() // formatDate 直接用无需 import /script template p今天是 {{ formatDate(now) }}/p /template六、第三方库的自动导入像 Vue 的ref、computed、watch等Nuxt 也帮你自动导入了script setup langts // 这些都不用 import const name ref(Nuxt) const upperName computed(() name.value.toUpperCase()) watch(name, (newVal) { console.log(name changed:, newVal) }) /script如果想添加其他库的自动导入在nuxt.config.ts配置export default defineNuxtConfig({ imports: { presets: [ { from: vue-i18n, imports: [useI18n] } ] } })七、查看自动导入列表想知道项目里有哪些自动导入在项目根目录运行npx nuxi prepare然后查看.nuxt/types/imports.d.ts里面列出了所有自动导入的内容。总结今天我们学习了 Nuxt 的自动导入功能目录导入内容使用方式components/组件直接在模板使用composables/组合式函数直接调用utils/工具函数直接调用自动导入的好处少写代码不用每个文件都写一堆 import开发更快想到就能用不用记住导入路径代码更干净文件顶部不再臃肿类型提示完整TypeScript 支持良好下一篇文章我们来聊聊布局系统学会后页面框架复用 so easy。内容有帮助点赞、在看、分享三连评论区等你