一蚂会、安裝nuxt3底層腳手架
npm nuxi init nuxt3-app
二拌消、項(xiàng)目結(jié)構(gòu)
我們?cè)陂_發(fā)過(guò)程中需要在腳手架上添加很多的東西翼馆，以下以我最近成型的項(xiàng)目結(jié)構(gòu)為例子
api: 用來(lái)寫后端提供的接口封裝成方法
app: 里面有個(gè)文件router.options.ts 可以用來(lái)做路由重定向和路由改寫等一系列路由相關(guān)的操作闽瓢，因?yàn)閚uxt3擺脫了傳統(tǒng)vue的router配置埃跷，他在pages下面新增一個(gè)文件就是一個(gè)路由蕊玷，pages/index.vue 他形成的路由就是/初始化路由。
assets: 用來(lái)存放圖片和css style 樣式
components: 組件文件夾弥雹，里面新增的組件在外面調(diào)用的時(shí)候不需要手動(dòng)import垃帅，直接按照文件名做駝峰疊加，如base/pdf.vue剪勿，頁(yè)面中直接<BasePdf />
composables: 目錄下創(chuàng)建的組合邏輯文件將會(huì)被系統(tǒng)自動(dòng)識(shí)別導(dǎo)入到應(yīng)用程序贸诚，以供全局使用。
layouts: 系統(tǒng)的layout厕吉，可以寫多個(gè)赦颇，有時(shí)候有的頁(yè)面layout不一樣，需要自定義layout赴涵，setup里面添加：
// 自定義layout 名字是文件名駝峰轉(zhuǎn)中劃線
definePageMeta({
layout: 'custom-layout'
})
middleware: 中間件媒怯，可用于攔截路由，對(duì)攔截的路由做處理髓窜，可以在router.options.ts 中做路由的改寫手動(dòng)添加頁(yè)面的middleware:['redirect']
redirect.ts
export default defineNuxtRouteMiddleware((to, from) => {
if (to.fullPath === '/') {
return navigateTo(useStore()?.defaultRoute)
}
})
