nuxt3笔记

使用ant-design-vue

（全局）

// /plugins/ant-design-vue.ts

import Antd from 'ant-design-vue' //全局使用 
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Antd);  //全局使用 
    // nuxtApp.vueApp.use(Button).use(Layout)//局部功能使用
})

（局部）

import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/lib/button/style'

<Button type="primary">Primary Button</Button>

（按需引入）

// nuxt.config.ts

import Components from 'unplugin-vue-components/vite'
import {
  AntDesignVueResolver
} from 'unplugin-vue-components/resolvers'


export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    plugins: [
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle:'less'  // 不用导入css，可以设置为false
          })
        ]
      })
    ]
  },
  // 这里是自定义主题，但是没生效。
  css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    'primary-color': '#ea6f5a',
                },
                javascriptEnabled: true,
            }
        }
    },
})

全局引入css

export default defineNuxtConfig({
    css: [
        '@/assets/css/base.css'
    ]
})

使用插件全局导入ant-design-vue的message

// plugins/message.ts
import { message } from 'ant-design-vue'

export default defineNuxtPlugin(() => {
    return {
        provide: {
            message: message
        }
    }
})

// 使用
const { $message } = useNuxtApp()
$message.info('请先登录')

使用插件全局使用ant-design-vue icon

import * as Icons from '@ant-design/icons-vue'

// 全局使用图标
export default defineNuxtPlugin((nuxtApp) => {
    const icons = Icons
    for(const i in icons) {
        nuxtApp.vueApp.component(i, icons[i])
    }
})

使用useCookie

// 定义
const userInfoCookie = useCookie('userInfo', { maxAge: 60 })
userInfoCookie.value = {
  uid: 123,
  username: 'lq'
}

// 获取
<template>
    <p>获取useCookie的值---------{{ useCookie('userInfo') }}</p>
</template>

使用composables

// 脚手架只能自动识别composables的下一级.ts文件的函数，如果存在下级子文件，那需要在nuxt.config.ts中配置

export default defineNuxtConfig({
    imports: [
        dirs: [
            // ... 或扫描带有特定名称和文件扩展名的一级嵌套模块
            // 自动扫描下一级模块
            'composables/*/*.{ts,js,mjs,mts}',
        ]
    ]
})

代理转发

export default defineNuxtConfig({
    nitro: {
        // 该配置用于服务端请求转发
        routeRules: {
            '/api/**': {
                proxy: 'https://api.005.cn/api/**'
            }
        }
    }
})

使用runtimeConfig以及设置环境变量

// process.env.BASE_URL
根目录下创建
    .env.local // 启动命令需要修改 "nuxt dev --dotenv .env.local"
    .env.production

配置文件内容如下
    BASE_URL = /api

export default defineNuxtConfig({
    runtimeConfig: {
        TEST: '这个变量只能是在服务端使用',
        public:{
            //公开
            BASE_URL: process.env.BASE_URL
        }
    }
})

// 使用
const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.public.BASE_URL // 如果是TEST，则不用加public

使用pinia进行持久化

// 依赖
pinia
@pinia/nuxt
@pinia-plugin-persistedstate/nuxt

// 配置
export default defineNuxtConfig({
    modules: [
        '@pinia/nuxt',
        '@pinia-plugin-persistedstate/nuxt'
    ]
})

// plugins/pinia.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.$pinia.use(piniaPluginPersistedstate)
})


// store/user.ts
import { defineStore } from 'pinia'

interface UserInfo {
    avatar?: string
    name?: string
    regist?: string
}
interface UserState {
    token: string
    userInfo: UserInfo
  }

export const userCouter = defineStore('counter',{
    state: (): UserState => ({
        token: '',
        userInfo: {}
    }),
    
    actions: {
        setToken (token: string) {
            this.token = token
        },
        setUserInfo (userInfo: UserInfo) {
            this.userInfo = userInfo
        }
    },
    
    //persist定义要做判断，因为localStorage是客户端参数，所以需要加process.client
    persist: process.client && {
        storage: localStorage,
        paths: ['token', 'userInfo'] // 要持久化的数据
    } 
})

// 使用
import { userCouter } from '@/store/user'
const user = userCouter()

user.setToken('')
user.setUserInfo({})

使用layout模板

<!-- 模板文件 layouts/default.vue -->
<template>
    <div class='layout'>
        <div class='container'>
            <!-- 插槽 -->
            <slot name='content'></slot>
        </div>
    </div>
</template>

<!-- 使用模板 -->
<template>
    <NuxtLayout name="default">
        <template #content>
            这里是内容
        </template>
    </NuxtLayout>
</template>

使用路由中间件(全局)(类似vue2 vue3的路由守卫)

// middleware/default.global.ts
// 文件名带上.global对所有路由跳转都生效
export default defineNuxtRouteMiddleware((to, from) => {
    return navigateTo('') // 跳转到我们想要的path
})

使用路由中间件(局部)

// middleware/onlyOne.ts
export default defineNuxtRouteMiddleware((to, from) => {
    console.log('只对设置了middleware的路由跳转生效')
})

// 使用,在对应的vue中
definePageMeta({
    middleware: ['only-one'] // 这里的中间件为middleware的ts名
})

嵌套路由

// 目录（父路由需要在pages下，子路由需要在父路由name文件下）
pages/parent.vue 父路由
<template>
    <h2>parent</h2>
    <NuxtPage></NuxtPage>
</template>

pages/parent/child.vue 子路由
<h3>child</h3>

// 使用
<NuxtLink to="/parent/child">嵌套路由</NuxtLink><br>

打包部署上线

<!-- 使用generate打包，适合用于博客之类的静态资源 -->


<!-- 使用build打包， 通过用pm2部署运行  -->
直接服务器上拉取代码，然后打包pnpm build
根目录创建pm2.config.cjs（网上是js后缀，但是会报模块错误）
运行pm2 start pm2.config.cjs

// pm2.config.cjs
module.exports = {
    apps: [
        {
            name: 'testdemo',
            port: '3005',
            exec_mode: 'cluster',
            instances: 'max',
            script: './.output/server/index.mjs'
        }
    ]
}