概述
Nuxt3使用约定式开发,即约定大于配置。
Nuxt3更新较快,网上大部分资料都较为落后,请以官网作为主要学习资料。
渲染模式
通用渲染(Universal (SSR / SSG)
):同时支持在浏览器和服务端加载数据;
仅客户端渲染( Single Page App
):仅在浏览器端加载数据;
配置HOST
创建Nuxt项目时,需要从 raw.Githubusercontent.com
下载依赖,但该域名被墙,因此需要配置本地HOST;
Node.js出于安全考虑,禁用了所有代理,所以即便你开启了全局翻墙代理,也无法在创建Nuxt项目时访问到 raw.Githubusercontent.com
;
185.199.108.133 raw.githubusercontent.com
TIP:如果上述IP失效,可以通过 IPAddress.com **查询到域名最新的IP
创建Nuxt项目
npx nuxi init nuxt-app
app.vue 是Nuxt3项目的入口文件,其中的NuxtWelcome组件是一个Next3的欢迎页面;删除该组件,编写自己的组件,就可以开始开发自己Nuxt3应用了:
<template>
<div>
<NuxtWelcome />
</div>
</template>
目录结构
文件和目录
- .nuxt // 自动生成的目录,用于展示结果
- app.vue // 项目入口
- nuxt.config.ts // 项目配置
- layouts // 布局
- pages // 页面
- components // 组件
- middleware // 中间件
- assets // 静态资源
- composables // 代码模块化目录(可复用组合逻辑)
- plugins // 自定义插件
- server // 服务器目录