基本介绍

110 阅读1分钟

概述

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              // 服务器目录