nuxt3入门和实战心得

一、安装nuxt3底层脚手架

npm nuxi init nuxt3-app

二、项目结构
我们在开发过程中需要在脚手架上添加很多的东西，以下以我最近成型的项目结构为例子

image.png

api: 用来写后端提供的接口封装成方法
app: 里面有个文件router.options.ts 可以用来做路由重定向和路由改写等一系列路由相关的操作，因为nuxt3摆脱了传统vue的router配置，他在pages下面新增一个文件就是一个路由，pages/index.vue 他形成的路由就是/初始化路由。
assets: 用来存放图片和css style 样式
components: 组件文件夹，里面新增的组件在外面调用的时候不需要手动import，直接按照文件名做驼峰叠加，如base/pdf.vue，页面中直接<BasePdf />
composables: 目录下创建的组合逻辑文件将会被系统自动识别导入到应用程序，以供全局使用。
layouts: 系统的layout，可以写多个，有时候有的页面layout不一样，需要自定义layout，setup里面添加：

// 自定义layout 名字是文件名驼峰转中划线
      definePageMeta({
        layout: 'custom-layout'
      })

middleware: 中间件，可用于拦截路由，对拦截的路由做处理，可以在router.options.ts 中做路由的改写手动添加页面的middleware:['redirect']

redirect.ts

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.fullPath === '/') {
    return navigateTo(useStore()?.defaultRoute)
  }
})