写在前面

开个新坑把vue官方推荐的nuxt学一下
官方链接(中文版): nuxt3
2023-07-07 决定暂时不写了，原因是没啥好写的，稍微看看文档就学会了

基本概念

学习nuxt前需要知道的

自动导入

  1. Nuxt自动导入辅助函数、可组合函数和Vue api在应用程序中使用，而无需显式导入它们。基于目录结构，每个Nuxt应用程序还可以对自己的组件、可组合组件和插件使用自动导入。组件、可组合组件或插件可以使用这些功能。!注意: 文件命名必须规范
  2. Explicit导入，Nuxt使用#imports别名公开每个自动导入，如果需要，可以使用该别名显式导入:
1
2
3
4
5
<script setup>
  import { ref, computed } from '#imports'
  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>
  1. 关闭自动导入,如果你想关闭自动导入,你可以将 imports.autoImport设置为 false.
1
2
3
4
5
6
# nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

学习

  1. Nuxt提供前端和后端功能，因此您可以专注于重要的事情:创建您的web应用程序。
  2. Nuxt使用约定和明确的目录结构来自动化重复的任务，并允许开发人员专注于推送特性。配置文件仍然可以自定义和覆盖其默认行为。

小坑总结

  1. nuxt生成的页面下方有一个devtool的工具那个不是页面，点击第二个圆形按钮即可关闭它。

安装

    路由

    和vue差不多

    小坑总结

    一个小坑如果创建了pages文件夹但是你没有在里面创建文件，则会出现404的情况

    useRoute()

    useRoute()组合可以在