初识nuxt3
开始使用
安装
//使用npx创建脚手架
npx nuxi init
cd
//安装node_module
yarn install
//启动
yarn dev -o
自动导入
Nuxt自动导入辅助函数、可组合函数和Vue api在应用程序中使用，而无需显式导入它们。基于目录结构，每个Nuxt应用程序还可以对自己的组件、可组合组件和插件使用自动导入。组件、可组合组件或插件可以使用这些功能。
在文档中，没有显式导入的每个函数都是由Nuxt自动导入的，可以在代码中原样使用。
Nuxt 自动导入
Nuxt自动导入函数和composables来执行data fetching，访问app context和runtime config，管理state或定义组件和插件。
Vue 自动导入
Vue 3公开了诸如ref 、 computed等反应性api，以及Nuxt自动导入的生命周期钩子和帮助器
Explicit 导入
Nuxt使用#imports别名公开每个自动导入，如果需要，可以使用该别名显式导入:
关闭自动导入
如果你想关闭自动导入,你可以将 imports.autoImport设置为 false
export default defineNuxtConfig({
imports: {
autoImport: false
}
})
Components 目录
components/目录是您放置所有Vue组件的地方，然后可以在您的页面或其他组件中导入这些组件，Nuxt自动导入你的components目录中的任何组件(以及你可能正在使用的任何模块注册的组件)。
默认情况下，任何扩展名在nuxt.config.ts extensions键]中指定的文件都被视为组件。 如果你需要限制应该注册为组件的文件扩展名，你可以使用组件目录声明的扩展形式及其extensions键
export default defineNuxtModule({
components: [
{
path: '~/components',
extensions: ['.vue'],
}
]
})
如果你在嵌套目录中有一个组件,组件的名称将基于它自己的路径、目录和文件名，删除重复的段。
如果你想只根据组件的名称而不是路径自动导入组件，那么你需要使用配置对象的扩展形式将pathPrefix选项设置为false.
Dynamic Components
如果你想使用Vue
使用resolveComponent来处理动态组件，请确保除了组件名称之外不插入任何内容，组件名称必须是字符串而不是变量。
Dynamic Imports
要动态导入一个组件(也称为惰性加载组件)，你所需要做的就是在组件名称前添加Lazy前缀。
ClientOnly Component
Nuxt 提供了组件，目的是只在客户端呈现一个组件。若要只在客户端导入组件，请在客户端插件中注册该组件。
如果组件只能在客户端呈现，则可以添加.client 后缀到您的组件。例：Comments.client.vue
.server 组件:.server 组件既可以单独使用，也可以与.client组件配对使用。
DevOnly Component
Composables 目录
Nuxt 3使用composables/目录使用auto-imports自动将Vue组合导入到应用中!
在底层，Nuxt自动生成文件.nuxt/imports.d.ts来声明类型。
为了让Nuxt生成类型，你必须运行nuxi prepare, nuxi dev 或 nuxi build。如果你在没有运行开发服务器的情况下创建了一个可组合对象，TypeScript会抛出一个错误，比如Cannot find name ‘useBar’.
export const useFoo = () => {
return useState('foo', () => 'bar')
}
现在可以在 .js, .ts 和 .vue 文件中使用自动导入组合
{{ foo }}
Nuxt只扫描 composables/ 目录的顶层文件
扫描composables/文件夹内的嵌套目录:
export default defineNuxtConfig({
imports: {
dirs: [
// Scan top-level modules
'composables',
// ... or scan modules nested one level deep with a specific name and file extension
'composables/*/index.{ts,js,mjs,mts}',
// ... or scan all modules within given directory
'composables/**'
]
}
})