代码片段 | 月空人

月空人的代码片段

这些是我在日常开发中使用的代码片段，你可以直接复制过去用！

该项目部署使用的 GitHub Actions

yml

name: deploy nuxt app
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-24.04
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          # version: "9.x"
          run_install: false

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 22.x
          cache: pnpm

      - name: Install dependencies
        run: pnpm install

      - name: Build the app
        run: pnpm run build

      - name: Deploy to Server
        uses: appleboy/scp-action@v1
        with:
          host: ${{ secrets.WXW_HOST }}
          username: ${{ secrets.WXW_USERNAME }}
          password: ${{ secrets.WXW_PASSWORD }}
          port: 22
          source: .output/
          target: ${{ secrets.WXW_TARGET }}

这里的 secrets 是在 GitHub 仓库的设置中配置的环境变量，确保你已经在仓库的 Secrets 中添加了 WXW_HOST, WXW_USERNAME, WXW_PASSWORD, 和 WXW_TARGET。这样配置后，每次你向 main 分支推送代码时，GitHub Actions 会自动触发部署流程，构建你的 Nuxt 应用并将其部署到指定的服务器上。你可以根据自己的需求调整 node-version 和其他配置项。

pnpm 工作区配置

pnpm-workspace.yamlyml

packages:
  - 'packages/*'
  - 'apps/*'
  - '!**/test/**'

pinia 常用

仓库配置

app.store.tsts

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore('appStore', () => {
    const user = ref(null)

    return {
        user,
    }
})

使用

app.vuevue

<script setup lang="ts">
import { storeToRefs } from 'pinia'

import { useAppStore } from '@/store/app.store'

const appStore = useAppStore()
const { user } = storeToRefs(appStore)
</script>

Nestjs 全局响应拦截器

添加这个可以让所有接口返回值都符合统一的格式

transform.interceptor.tsts

import type { IResponse, IResponseWithExtra } from 'src/types/response.type';

import { CallHandler, NestInterceptor } from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class TransformInterceptor<T = any>
implements NestInterceptor<T, IResponse<T>> {
    intercept(_, next: CallHandler<T>): Observable<IResponse<T>> {
        return next.handle().pipe(
            map((data) => {
                console.log(data, 'data');
                const responseData = data as T | IResponseWithExtra<T>;
                if (
                    responseData instanceof Object
                    && 'data' in responseData
                    && 'extra' in responseData
                ) {
                    return {
                        data: responseData.data!,
                        status: 200,
                        extra: responseData.extra || {},
                        message: 'success',
                        success: true,
                    };
                }
                return {
                    data,
                    status: 200,
                    extra: {},
                    message: 'success',
                    success: true,
                };
            }),
        );
    }
}

types/response.type.tsts

export interface IResponse<T> {
    data: T
    status: number
    extra: Record<string, any>
    message: string
    success: boolean
}

export interface IResponseWithExtra<T, R = Record<string, any>> {
    data?: T
    extra?: R
}

interface IPaginationExtra {
    total: number
    page: number
    pageSize: number
    [key: string]: any // 其他字段
}

export interface IResponseWithPagination<T, R = IPaginationExtra> {
    data?: T[]
    extra?: R
}

VSCode 代码片段

一些我用的 VSCode 代码片段

json

{
  "vue3 setup base": {
    "prefix": "v3",
    "body": [
      "<script lang='ts' setup>",
      "",
      "</script>",
      "",
      "<template>",
      "$1",
      "</template>",
      "",
    ],
    "description": "vue3 setup base",
  },
  "pinia base": {
    "prefix": "v3-store",
    "body": [
      "import { defineStore } from 'pinia'",
      "",
      "export const use${TM_FILENAME_BASE/^(.)|-(.)/${1:/capitalize}${2:/capitalize}/g} = defineStore('$TM_FILENAME_BASE', () => {",
      "    ",
      "",
      "    return {",
      "        ",
      "    }",
      "})",
    ],
    "description": "pinia base",
  },
}