nuxt

nuxt入门 【前端部分】

使用nuxt开发toC应用，实现服务端渲染。

课程目标：

• nuxt是啥？
• 搭建nuxt开发环境？
• 前端
  • 路由搭建
    • layout…
  • 资源的使用
  • scss的使用
  • 数据的获取
• 后端
  • 封装请求方法
  • 服务端渲染

安装

官网链接

• node版本大于16.11
• 安装pnpm
  • yarn global add pnpm
• 设置host 映射ip
  • 打开目录 C:\Windows\System32\drivers\etc 修改hosts文件

185.199.108.133 raw.githubusercontent.com

• 初始化
  • pnpm dlx nuxi init nuxt-demo
  • npx nuxi init
• 进入项目 cd
• 安装依赖 yarn
• 运行项目

配置

官网链接

nuxt.config.ts

类似与vite项目的vite.config.ts, 亦或者是vue2项目的vue.config.ts。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  // 环境变量
  runtimeConfig: {
    // 服务端的环境变量
    apiSecret: '123',
    // 客户端的环境变量
    public: {
      apiBase: '/api'
    }
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import '@/assets/mixin.scss';`
        }
      }
    }
  },
  // 配置px--》rem 啥的
  postcss: {},
  webpack: {}
})

其中环境变量，可以通过nuxt内置方法获取。

const runtimeConfig = useRuntimeConfig()

useRuntimeConfig无须导入直接使用即可

app.config.ts

当前的应用配置文件

export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000'
    }
  }
})

const appConfig = useAppConfig()

使用内置方法获取

scss

配置全局scss

export default defineNuxtConfig({
    
    vite: {
        css: {
          preprocessorOptions: {
            scss: {
              additionalData: `@import '@/assets/mixin.scss';`
            }
          }
        }
  	}
    
})

跟vite的配置一样

reset.scss的使用

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: [
    '@/style/main.scss'
  ]
})

应用&组件&页面

官网链接

app.vue

是整个项目的入口文件

组件

component文件夹下的所有.vue文件。 创建之后，直接使用，无须导入。

页面

pages下的.vue文件就是页面。页面也是主动注册路由。

layout的使用

参考文档

layout的定义

在项目的layouts目录下定义各种layout即可。通过插槽传递内容

• layouts/default.vue 一个默认的布局：default
• layouts/customer.vue 一个名字叫做customer的布局

layout的使用

通过组件NuxtLayout配合NuxtPage 实现全局使用layout

<template>
  <div>
    <NuxtLayout name="custom">
      <NuxtPage></NuxtPage>
    </NuxtLayout>
  </div>
</template>

app.vue。 当然你可以通过配置NuxtLayout的name指定非default的布局

definePageMeta的使用

经过以上步骤，项目中所有页面都应用了某个布局，如果某一个文件不想用。使用definePageMeta方法即可

definePageMeta({
     layout: false
})

资源

nuxt的资源目录文件分为 public, assets.没什么好说的~~~

路由

官方链接

路由配置

路由参数设置

获取路由参数

路由中间件【路由守卫】

element-plus的使用

掘金参考

以前的项目

• 下载element

• 在main.ts中引入element, 样式文件

• app.use(element)

nuxt进阶【服务端渲染】

服务端中间件编写

// 中间件，类似于koa的中间件，event类似于koa的ctx
export default defineEventHandler((event) => {
    // console.log()
    // console.log('New request: ' + event.node.req.url)
    // 统一设置token
    const app = useRuntimeConfig()
    console.log(event)
    event.context.baseUrl = app['BASE_URL']
})

fetch封装

页面使用