一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

Nuxt3-学习之路 02， 安装使用

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的 乱七八糟 的 知识点。

安装

根据Nuxt3 官方文档的一个说明来进行安装

npx nuxi init nuxt3-pro

根据提示，我们进入项目，查看目录结构，查看 package.json 后，根据 package.json 的内容，进行安装和运行命令。

cd nuxt3-pro

yarn install

yarn dev

可以看到是开启了一个 node web-server ，打开后，可以看到还做了自适应，而且边框的渐变颜色动画很不错，之前项目就有要这种边框呢。有兴趣的可以研究保存一下他这里的css样式。

Nuxt3 的自动导入

我们可以从 app.vue 里面仅仅只有一个 template

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

并没有发现从哪里引入这个 NuxtWelcome。这就是要说的一点，Nuxt3 的自动导入

是无需显式导入的它们，而是直接通过 Nuxt 来自动导入这些相关组件，辅助函数，和 Vue API 。大白话就是，你在其他页面定义好，我在我这个页面不需要导入，直接用，能够直接在页面中进行使用。

这里总结下有哪些导入：

• Nuxt 自动导入

  • useAsyncData，useFetch 这类方法

• Vue 自动导入

  • script setup

  • ref，computed 等这些 Vue3 的相关方法

• 基于目录的自动导入

  在 nuxt3-pro 目录下直接创建

  • components 放入 Vue 的相关组件，也就是 .vue 结尾的页面

  • composables 放入 Vue 的可组合组件，也就是 ts 文件

  • assets 放入静态图片等资源

• 显示导入

  当然也可以显示导入，这里就不说了

总结

学习了 Nuxt3 的安装及如何使用，还有相关介绍。