Vite 自定义插件

本质

vite 插件的本质就上 rollup插件 + vite 独有的钩子

┌─────────────────────────────────────────────────────┐
│                   Vite 插件                         │
├─────────────────────────────────────────────────────┤
│  Rollup 插件钩子 (通用)                              │
│  ├── buildStart                                     │
│  ├── resolveId                                      │
│  ├── load                                           │
│  ├── transform                                      │
│  ├── renderChunk                                    │
│  ├── generateBundle                                 │
│  └── writeBundle                                    │
├─────────────────────────────────────────────────────┤
│  Vite 独有钩子                                       │
│  ├── config                                         │
│  ├── configResolved                                 │
│  ├── configureServer                               │
│  ├── transformIndexHtml                            │
│  └── handleHotUpdate                               │
└─────────────────────────────────────────────────────┘

Mr shen2026/3/26大约 1 分钟

事件循环机制

什么是事件循环

JavaScript 是一门单线程、非阻塞的语言。事件循环（Event Loop）是 JavaScript 实现异步编程的核心机制，它负责协调主线程执行同步代码和管理异步任务的执行顺序。

为什么需要事件循环

JavaScript 只有一个主线程，同步代码会阻塞主线程。事件循环的作用是在主线程空闲时，从任务队列中取出任务执行，从而实现「非阻塞」的特性。

执行栈和任务队列

执行栈（Call Stack）

执行栈是一个后进先出（LIFO）的数据结构，用于存储代码执行时的上下文。

Mr shen2026/3/25大约 7 分钟

理解Typeof 陷阱

在进行类型判断的时候 typeof 是最常用的工具之一，但它并非没有问题

避免错误的类型判断尤其在处理null 的时候
编写更为健壮的代码

Api 用法

// 原始类型
console.log(typeof 'hello');      // "string"
console.log(typeof 123);          // "number"
console.log(typeof true);         // "boolean"
console.log(typeof Symbol('id')); // "symbol"
console.log(typeof 123n);         // "bigint"
console.log(typeof undefined);    // "undefined"

// 对象类型
console.log(typeof { a: 1 });     // "object"
console.log(typeof [1, 2, 3]);    // "object" (陷阱)
console.log(typeof new Date());   // "object"

// 函数
console.log(typeof function() {});// "function" (特殊的对象)

Mr shen2026/3/20大约 2 分钟

什么是Vue 中的 slot ,他的作用

模版传递，可以自定义传递模版内容
在子组件内部是一个区域占位符，父组件可以根据子组件内部定义的插槽去传递内容
有三种类型的插槽默认插槽具名插槽作用域插槽

Vue Router 配置404 页面

import { createRouter, createWebHistory } from 'vue-router'
import NotFound from '@/views/NotFound.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 其他路由...
    { path: '/', component: Home },
    { path: '/about', component: About },
    
    // 404 路由配置 - 放在最后
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
  ]
})

Mr shen2026/3/20大约 2 分钟

本地调试工具 lil-gui

使用

import GUI from "lil-gui";

const gui = new GUI();

const eventObj = {
  fullScreen: () => {
    document.body.requestFullscreen();
  },
  size: 0,
};

gui.add(eventObj, "fullScreen").name("全屏");

gui.add(cube.position, "x").min(-10).max(10).step(0.1).name("立方体位置 x");

gui
  .add(eventObj, "size")
  .min(0)
  .max(100)
  .step(1)
  .name("立方体大小")
  .onChange((value) => {
    cube.scale.set(value, value, value);
  });

Mr shen2026/3/12大约 1 分钟

Three 起步

创建一个场景 + 相机 + 渲染器

import * as THREE from "three";

const scene = new THREE.Scene();

// 创建一个透视相机  第一个参数是视野范围  第二个参数是宽高比  第三个参数是近裁剪面  第四个参数是远裁剪面
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

Mr shen2026/3/11小于 1 分钟

Object3D

位置控制 position

每个物品放入场景的时候都需要一个mesh(网格)，mesh是一个物体的基本单位，每个mesh都有一个position属性，position属性是一个Vector3对象，用来表示物体的位置。

位置属性

position属性有三个属性x、y、z，分别表示物体在三个轴上的位置。

// 设置物体位置
mesh.position.set(1, 2, 3);

Mr shen2026/3/11小于 1 分钟

Vite 打包优化

基础

生产环境移除 debugger console.log

export default defineConfig({
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: false, // 不自动移除所有 console
        pure_funcs: ["console.log", "console.info", "console.debug"], // 只移除指定的
        drop_debugger: true,
      },
    },
  },
});

Mr shen2026/2/3大约 2 分钟

数据库表之间的关系和设计

一对一关系（One-to-One）

在这里就以一个用户表和抽奖次数表为例一个用户拥有多少次抽奖机会就是一对一的关系

    user.entity.ts
  
import {Column, Entity, ManyToOne, PrimaryGeneratedColumn, JoinColumn, OneToMany, OneToOne} from 'typeorm'
import {RoleEntity} from '@entity/role.entity'
import {LotteryRecordEntity} from '@entity/lotteryRecord.entity'
import {LotteryChancesEntity} from '@entity/lotteryChances.entity'

@Entity({name: 'user'})
export class UserEntity {
  @PrimaryGeneratedColumn({type: 'int'})
  id: number
  @Column({type: 'varchar', length: 255, nullable: false})
  name: string
  @Column({nullable: true, default: 'man'})
  gender: string
  @Column({nullable: true, default: 0})
  age: number
  @Column({nullable: false, unique: true, type: 'bigint'})
  phone: string
  @Column({nullable: true})
  description: string
  @Column({nullable: true, type: 'datetime', name: 'create_time'})
  createTime: Date
  @Column({type: 'varchar', length: 255, nullable: false})
  password: string

  // many users can have one role. explicit inverse and join column (role_id)
  @ManyToOne(() => RoleEntity, role => role.users, {nullable: true})
  @JoinColumn({name: 'role_id'})
  role: RoleEntity | null

  // @OneToMany(() => LotteryRecordEntity, lotteryRecord => lotteryRecord.user)
  // lotteryRecords: LotteryRecordEntity[]

  @OneToOne(() => LotteryChancesEntity, lotteryChances => lotteryChances.user)
  lotteryChances: LotteryChancesEntity
}

Mr shen2026/1/17大约 2 分钟