nuxt
- 安装卡死的话，把npm源切换会npm
npx nuxi@latest init demo
- pages 页面目录，有该目录的情况下，app.vue里面必须配置<NuxtPage />标签才可以，如果要访问首页，pages目录中必须存在index.vue文件，即便该文件没有内容
- assets 资源目录，比如js，css，等内容
- components 组件目录
- layouts 布局模板文件
- pages 目录结构就是默认路由结构
- 简单的传参可以通过路由参数的形式，将参数名称用中括号包裹起来放在文件名或者目录名即中即可，获取参数方法如下
<template>
{{ $route.params.id }} // 这里的 id 就是参数
{{ name }} // 也可以在 script 中获取到参数
// 这里用到了 2 个参数，需要通过目录嵌套一层，目录名和文件名分别配置一个参数
</template>
<script setup>
import {ref} from 'vue'
const route = useRoute()
const name = route.params.name
</script>
在 pages 目录中，创建同名的 文件 和 目录，既可实现页面嵌套，将子页面写入目录中，然后在父页面文件中写入 NuxtPage 标签，即可，路由通过目录名和子页面文件名即可访问到对应的父子页面
- 布局模板文件要放在 layouts 目录下面
- 布局模板文件建立整体布局，提供插槽来自定义各自页面对应内容
// default.vue
<template>
<head />
<slot name="nav" />
<slot name="main" />
<foot />
</template>
- 页面中使用布局模板
<template>
<NuxtLayout name="default">
<template #nav>
//... nav content
</template>
<template #main>
// main content
</template>
</NuxtLayout>
</template>
- 组件在引入时，可以用单词首字母大写，也可以用-连接小写单词的方式，建议使用前者，以区分自定义组件和系统组件
- 多层级组件：当layouts 目录中，组件被目录嵌套时，引入组件的时候要在组件前面加上首字母大写的目录名称
- 懒加载组件：页面内容很多，可以晚一点在显示的组件，或者可以显示可以不显示的组件，可以使用懒加载，在组件名称前面加上Lazy即可实现组件的懒加载
- 在根目录下创建该目录，该目录中文件中定义的函数方法，可以直接在页面中调用而不需要引入操作
- 该目录中的文件，不要用目录嵌套，否则会出问题，如果要用目录包裹，目录中只有index.vue文件会被自动识别。
- 根目录创建 middleware 目录
- global.ts 结尾的中间件是全局中间件
export default defineNuxtRouteMiddleware((to, from) => {
console.log(to)
console.log(from)
if(to.path === '/index') {
abortNavigation() // 阻止页面跳转
return navigateTo('/login') 跳转到登陆页面
}
})
- 单页面中间件
<script setup>
definePageMeta({
middleware: [
"default" // 这里是中间件文件名
]
})
</script>
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true },
postcss: {
plugins: {
'postcss-px-to-viewport': {
unitToConvert: 'px',
viewportWidth: 750,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
}
}
})
<style lang="postcss">
#app {
@media (max-width: 768px) {
width: 200px;
height: 200px;
background-color: red;
}
}
#app {
@media (...) and (...) {}
}
</style>
