6.6、layouts
6.6.1、理解：布局、页面布局、公共布局、基础布局
6.6.2、根目录创建layouts目录，/layouts/default.vue
<template> <div> snow-default-layout </div> <slot /> </template> <script setup lang="ts"> </script> <style scoped> </style>
6.6.3、app.vue
<template> <NuxtLayout> <NuxtPage/> </NuxtLayout> <!-- <div> <NuxtWelcome /> </div> --> </template>
6.6.4、
6.6.5、某页面不想使用layout：
definePageMeta({ layout: false })
6.6.6、某页面使用指定layout
definePageMeta({ layout: 'layout-snow' })
6.6.7、动态设置layout
const router = useRoute() function enableLayout () { router.meta.layout = "layout-snow" }
6.6.8、全局设置，指定layout
<template> <NuxtLayout :name="layoutSnow"> <NuxtPage/> </NuxtLayout> <!-- <div> <NuxtWelcome /> </div> --> </template> <script setup lang="ts"> const layoutSnow = ref("layout-snow") </script>
6.7、plugins
/plugins/index.ts
export default defineNuxtPlugin(()=>{ return { provide: { hello: (msg: string) => `hello ${msg}` } } })
/pages/plugin.vue
<template> <div> snow-plugin </div> </template> <script setup lang="ts"> const { $hello } = useNuxtApp() console.log('9', $hello('world')) </script> <style scoped> </style>
6.8、middleware
/middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from)=>{ console.log("auth") })
/middleware/snow.ts
export default defineNuxtRouteMiddleware((to, from)=>{ console.log("snow") })
/pages/plugin.vue
<template> <div> snow-plugin </div> </template> <script setup lang="ts"> definePageMeta({ middleware: ["auth", "snow"] }) </script> <style scoped> </style>
如图：
6.9、server
6.9.1、目录
6.9.2、server/api/hello.ts
export default defineEventHandler((event) => { return { api: "works" } })
6.9.3、server/api/test.get.ts
export default defineEventHandler((event) => { return `test get ts` })
6.9.4、server/api/test.post.ts
export default defineEventHandler((event) => { return `test post ts` })
post请求需要使用postman工具：
6.9.5、 server/api/foo/[...].ts
可以带有参数
export default defineEventHandler(() => `default api handle`)
6.9.6、server/api/submit.post.ts
export default defineEventHandler (async (event) => { const body = await readBody(event); return { body } })
6.9.7、server/api/query.get.ts
export default defineEventHandler((event) => { const query = getQuery(event) return { a: query.param1, b: query.param2 } })
6.10、使用element-plus
6.10.1、安装
pnpm install element-plus
pnpm add sass sass-loader -D
pnpm add unplugin-auto-import unplugin-icons unplugin-vue-components -D
6.10.2、package.json
{ "private":true, "scripts":{ "build":"nuxt build", "dev":"nuxt dev", "generate":"nuxt generate", "preview":"nuxt preview", "postinstall":"nuxt prepare" }, "devDependencies":{ "nuxt":"3.0.0", "sass":"1.57.1", "sass-loader":"13.2.8", "unplugin-auto-import":".12.1", "unplugin-icons":".14.15", "unplugin-vue-components":".22.12" }, "dependencies":{ "element-plus":"^2 .2.27" } }
6.10.3、assets/scss/index.scss
@use "element-plus/dist/index.css";
6.10.4、tsconfig.json
{ // https://nuxt.com/docs/guide/concepts/typescript "extends": "./.nuxt/tsconfig.json", "compilerOptions": { "types": ["element-plus/global"] } }
6.10.5、 nuxt.config.ts
import AutoImport from 'unplugin-auto-import/vite' import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import IconsResolver from "unplugin-icons/resolver"; const lifecycle = process.env.npm_lifecycle_event; export default defineNuxtConfig({ vite: { plugins: [ AutoImport({ resolvers: [ ElementPlusResolver( ), IconsResolver()] }), Components({ dts: true, resolvers: [ElementPlusResolver( { importStyle: false } )] }), ], }, components: true, css: ["~/assets/scss/index.scss"], transpile: ["element-plus"], build: { transpile: lifecycle === "build" ? ["element-plus"] : [], }, })
6.10.6、plugins/element-plus.ts
import { ID_INJECTION_KEY } from 'element-plus'; export default defineNuxtPlugin(nuxtApp => { // Doing something with nuxtApp nuxtApp.vueApp.provide(ID_INJECTION_KEY,{ prefix: Math.floor(Math.random() * 10000), current: 0, }) })
6.10.7、pages/index.vue
<el-button> ElButton </el-button>
6.10.8、成功实现效果
