Nuxt3入门

leolee18
480 阅读5分钟

Nuxt 是一个基于Vue.js的、可用来创建服务端渲染（SSR）应用的通用应用框架，对应 React 技术栈的叫做 Next.js 框架，两者名字长得很像，都是支持 SSR 技术的框架

Nuxt3优势

  1. 全面拥抱Vue3
  2. 全面支持TypeScript
  3. 自动导入与引用（包括 Vue3 的 setup 语法）
  4. 支持所有渲染模式和所有环境
  5. 充分支持Vue生态系统（如：Vite、Pinia）

安装

// 安装报错 参考方法
https://blog.csdn.net/m0_37824255/article/details/135657716

npx nuxi@latest init <project-name>
// 安装报错 如果上面的处理方法还是不行。可以去gitee下载.
https://gitee.com/ikexing/nuxt-app

// 进入项目
cd nuxt3-test

// 安装依赖包
npm install

// 运行项目
npm run dev

// Nuxt3基础目录结构 ////////////////////
　 - .nuxt // 自动生成的目录，用于展示结果
   - public // 静态资源目录
   - components // 组件目录
   - layouts // 布局目录
   - pages // 页面目录
　　- node_modules // 项目依赖包存放目录

　　- .gitignore // Git的配置目录，比如一些文件不用Git管理就可以在这个文件中配置

　　- app.vue // 项目入口文件，你可以在这里配置路由的出口

　　- nuxt.config.ts // nuxt项目的配置文件 ，这个里边可以配置Nuxt项目的方法面面

　　- package-lock.json // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致

　　- package.json // 包的配置文件和项目的启动调式命令配置 - README.md // 项目的说明文件

　　- tsconfig.json // TypeScript的配置文件

Nuxt3约定路由,嵌套路由

// 根目录下新建pages 然后文件夹里面新建index.vue
// 在根目录下app.vue 文件中使用<Nuxtpage>  路由的出口

<template>
  <div>
    <NuxtPage></NuxtPage>
  </div>
</template>

// 在pages目录下创建demo1.vue 文件  然后就在index.vue 跳转到demo1.vue 使用NuxtLink 标签
// http://localhost:3000/
<template>
  <div >
    <h1>Index Page</h1>
    <NuxtLink to="/demo1">Demo1.vue</NuxtLink>
  </div>
</template>

// 在pages目录下创建about.vue 文件
// http://localhost:3000/about
<template>
  <div >
    <h1>about Page</h1>
  </div>
</template>

/////////////////////////////////////////
// 建立嵌套路由的文件夹（约定大于配置）
// 创建和文件夹相同名称的文件（父页面）
// 在新建文件夹下任意创建子页面

|--pages
|----parent/
|------child.vue
|----parent.vue

//parent.vue  里面引用子页面

<template>
  <div class="">Parent Page</div>
  <!-- 子页面的出口-->
  <NuxtChild></NuxtChild>
</template>

<script setup>
import {} from "vue";
</script>

<style scoped></style>

nuxt 组件 components

把Vue组件放在components/目录，这些组件可以被用在页面和其他组件中，以往我们使用这些组件需要导入并注册它们，但Nuxt会自动导入components/目录中的任意组件

<template>
  <div >
    <h1>引入组件 Page</h1>
    <Banner></Banner>
    <BannerChild></BannerChild>
  </div>
</template>

//components 文件夹下新建 Banner.vue 文件
//components 文件夹下新建 Banner文件夹，在Banner文件夹下创建Child.vue 文件

nuxt 布局 layouts

入口文件app.vue里用NuxtLayout包裹起来，那么我们就可以使得整个项目页面都公用一个NuxtLayout实例，这样状态、数据、NuxtLayout实例都可以共享了

// default.vue
<template>
  <div>
    <div>头部——————</div>
    <slot/>
    <div>底部——————</div>
  </div>
</template>

//app.vue 引入布局文件
<NuxtLayout>
  <NuxtPage></NuxtPage>
</NuxtLayout>

//custom.vue 自定义布局 /////////////
<template>
  <div>      
     <h1>自定义默认布局页 custom.vue</h1>
      <slot name="title"></slot>
      <slot></slot>
   </div>
</template>

//使用自定义布局与自定义插槽 CustomUniversalPage.vue
/*
<template>
  <div >
    <h1>CustomUniversalPage</h1>
    <NuxtLayout name="custom">
        <template #title> 
          <div>
            <h1>title 自定义具名插槽</h1>
          </div>
        </template>
        <template #default>
          <h1>default 默认插槽</h1>
        </template>
    </NuxtLayout>
  </div>
</template>
*/

nuxt 路由

给app.vue中 添加标签（相当于vue2中router-view标签）,再在根目录新建 pages 文件夹，添加 index.vue文件，这样当访问localhost:3000/ 时，就不会去访问app.vue，而是 pages/index.vue 页面了 。

//普通路由 在pages文件夹下新建 xxx.vue 文件,就是一个普通路由。
//路由跳转 <NuxtLink to="/a">去 a 页面</NuxtLink> 或 navigateTo
const to_a = () => {
    navigateTo({
        path: "/a",
        query: { name: "张三", age: 33 }
    });
}
// 路由传参 <NuxtLink to="/a?name=张三&age=30">去 a 页面</NuxtLink>
$route.query.name //张三

//动态路由
// 通过 $route.params 接受参数

Nuxt3动态路由的使用

-| pages/
---| index.vue
---| demo2-[id].vue


<template>
  <div class="">获取的id:{{ id }}</div>
</template>

<script setup>
import { ref } from "vue";
const route = useRoute();
const id = ref(route.params.id);
</scrip>

<style scoped></style>

//多参数的传递和获取///////////////////
-|  pages/
---| index.vue
---| goods-[name]/
-----| demo2-[id].vue


<template>
  <div class="">获取的id:{{ id }}</div>
  <div class="">获取的name:{{ name }}</div>
</template>

<script setup>
import { ref } from "vue";
const route = useRoute();
const id = ref(route.params.id);
const name = ref(route.params.name);
</script>

<style scoped></style>

//<NuxtLink to="/goods-shangpin/demo2-38">Demo2.vue</NuxtLink>

嵌套路由

在根目录创建一个与父页面同名的文件夹，比如父页面是 parent.vue, 那就在根目录创建一个 parent 文件夹，在 parent.vue 父页面里面加入 NuxtPage 组件，即可在父页面里面动态展现子页面

Nuxt3 数据获取

//$fetch
//Nuxt内置了数据获取库ofetch，它基于fetch API构建，并提供了一些方便的功能
const todos = await $fetch('/api/todos').catch((error) => error.data)

// useFetch
// useFetch是在组件设置函数中处理数据获取最简单的方法。
/*
<script setup>
const { data, error, pending, refresh } = await useFetch('/api/todos')
</script>

<template>
  <span v-if="pending">加载中...</span>
  <span v-else-if="data">Todos: {{ data }}</span>
  <span v-else-if="error">错误: {{ error }}</span>
  <button @click="refresh">刷新</button>
</template>
*/

// useAsyncData
// useFetch用于从给定的URL获取数据，而useAsyncData允许进行更复杂的逻辑处理。实际上，useFetch(url)几乎等同于useAsyncData(url, () => $fetch(url))，为最常见的用例提供了更简化的开发体验。
const { data, error } = await useAsyncData('getTodos', () => fetchTodos())

/*
总结
fetch函数适用于基于用户交互启动网络请求的情况。建议在将数据发送到事件处理程序、仅执行客户端逻辑或与useAsyncData组合使用时使用fetch。
useFetch组合式是在组件的设置函数中处理数据获取的最简单方法。
如果您需要更精确地控制数据获取过程，可以选择使用useAsyncData结合$fetch。
*/

Server API

  1. Nuxt自动扫描~/server/api, ~/server/routes, 和 ~/server/middleware目录中的文件，以注册具有HMR支持的API和服务器处理程序。
  2. 每个文件都应该导出一个用defineEventHandler()定义的默认函数。
  3. 处理程序可以直接返回JSON数据，一个Promise或使用event.node.res.end()发送响应。
//创建一个新文件server/api/homeInfo.ts:
export default defineEventHandler((event) => {
  let { req, res } = event.node;

  console.log(req.method);
  console.log(req.url);

  return {
    code: 200,
    data: {
      name: "liujun",
      age: 18,
    },
  };
});
//await $fetch(‘/api/homeInfo’)通用地调用这个API
//http://localhost:3000/api/homeInfo

Nuxt 3 应用的部署

1、确保你的项目构建成功：
npm run build
2、将构建产物上传到服务器。你可以使用 FTP、SCP、rsync 或其他任何方法。
3、如果你使用的是 Nginx，你可能需要配置一个简单的服务器块来代理传入的请求到你的应用。例如：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
4、在服务器上安装 Node.js 和 npm。
5、在服务器上安装 Nuxt 3 CLI 工具：
npm install -g @nuxt/cli
6、在服务器上启动你的 Nuxt 应用：
nuxt start
确保服务器的安全组或防火墙设置允许外部访问你配置的端口。


// 几个主要命令
// nuxt 启动一个热加载的 Web 服务器（开发模式） localhost:3000。
// nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）。
// nuxt start 以生产模式启动一个 Web 服务器 (需要先执行nuxt build)。
// nuxt generate 编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)。

// 三种部署形式:
// SSR渲染部署。先nuxt build，再nuxt start
// 静态部署。先nuxt generate编译成静态文件，会生成dist 文件夹，所有静态化后的资源文件均在其中。然后扔到nginx上
// SPA部署。nuxt build --spa, 自动生成dist/文件夹，然后扔到nginx上

源码下载:https://gitee.com/leolee18/nuxt-project

avatar
文章
阅读
粉丝