New Folder

1. 安装NodeJS：Node.js — Download Node.js®
2. 建立项目文件夹
3. 创建一个基于 vite 和 vue 的项目

项目根目录命令行依次运行如下命令：

npm create vite@latest . -- --template vue-ts
npm install
npm install gl-matrix
npm install @types/node --save-dev
npm install @webgpu/types --save-dev

修改文件tsconfig.json ，这里面 ”types” 下的 "@webgpu/types" 很关键，没它的话会找不到webgpu的类型：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@core/*": ["src/core/*"],
      "@demos/*": ["src/demos/*"]
    },
    "types": ["@webgpu/types", "node"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

修改tsconfig.node.json ：

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2023",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "composite": true,
    "outDir": "./dist",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

修改文件vite.config.ts ，这块主要是alias的内容，后面还会动态增加，主要是方便查找

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    host: '0.0.0.0',
    port: 3000
  },
  build: {
    target: 'esnext' // 确保支持最新的ES特性，对WebGPU很重要
  },
  optimizeDeps: {
    exclude: ['@webgpu/types'] // 避免优化这些类型包
  }
})

添加文件src/types/webgpu.d.ts：

declare module '*.wgsl' {
  const content: string
  export default content
}

Project Structure

src/
├── core/                 # 图形框架核心代码
│   ├── rendering/        # 渲染相关
│   ├── shaders/          # 着色器文件(.wgsl)
│   ├── math/             # 数学库(基于gl-matrix的扩展)
│   ├── utils/            # 工具函数
│   └── index.ts          # 框架入口
├── demos/                # 各个演示页面
│   ├── demo1/            # 演示1
│   │   ├── Demo1.vue     # 演示组件
│   │   └── index.ts      # 演示入口
│   ├── demo2/            # 演示2
│   └── index.ts          # 演示列表导出
├── components/           # 通用UI组件
├── types/               # 类型定义
└── App.vue             # 主应用

Q&A

What’s .d.ts?

.d.ts 文件本质上就是给没有类型信息的 JS 代码做补充说明。该文件并不会生成实际的 JavaScript 代码，它只是描述现有 JS 代码的类型结构，也就是说，它对运行时没有任何影响，纯粹是编译期的契约。