摘月亮的小船儿

切换模式

使用 vite 创建项目 ​

选择模版与语言 ​

创建项目时，选择 vanilla 模版，并选择 JavaScript 语言。

img

安装依赖 ​

bash
npm install pixi.js
npm install pixi.js

创建项目结构 ​

bash
├── src
│   ├── assets
│   ├── game
│   │   ├── index.js
│   │   ├── config.js
│   ├── main.js
│   ├── styles
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js
├── src
│   ├── assets
│   ├── game
│   │   ├── index.js
│   │   ├── config.js
│   ├── main.js
│   ├── styles
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

配置 vite.config.js ​

js
import { defineConfig } from 'vite';

export default defineConfig({
  // 项目根目录（index.html 文件所在的位置）
  root: process.cwd(),

  // 开发或生产环境服务的公共基础路径。
  base: '/',

  // 插件列表
  plugins: [],

  // 模块解析配置
  resolve: {
    // 别名配置，方便在项目中引用模块
    alias: {
      '@': '/src',
    },
    // 导入文件时省略的扩展名列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  },

  // 开发服务器配置
  server: {
    // 端口号
    port: 8800,
    // 是否自动打开浏览器
    open: true,
    // 是否严格绑定端口，如果为true且端口被占用，则直接退出
    strictPort: true,
    // 跨域配置
    cors: true,
    // 代理配置，用于开发环境的 API 代理
    proxy: {
      '/dev-api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // 构建配置
  build: {
    // 指定输出路径
    outDir: 'dist',
    // 生成静态资源的存放路径
    assetsDir: 'assets',
    // 禁用资源内联为 base64
    assetsInlineLimit: 0,
    // 启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    // 构建后是否生成 source map 文件
    sourcemap: true,
    // 清空输出目录
    emptyOutDir: true
  }
});
import { defineConfig } from 'vite';

export default defineConfig({
  // 项目根目录（index.html 文件所在的位置）
  root: process.cwd(),

  // 开发或生产环境服务的公共基础路径。
  base: '/',

  // 插件列表
  plugins: [],

  // 模块解析配置
  resolve: {
    // 别名配置，方便在项目中引用模块
    alias: {
      '@': '/src',
    },
    // 导入文件时省略的扩展名列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
  },

  // 开发服务器配置
  server: {
    // 端口号
    port: 8800,
    // 是否自动打开浏览器
    open: true,
    // 是否严格绑定端口，如果为true且端口被占用，则直接退出
    strictPort: true,
    // 跨域配置
    cors: true,
    // 代理配置，用于开发环境的 API 代理
    proxy: {
      '/dev-api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // 构建配置
  build: {
    // 指定输出路径
    outDir: 'dist',
    // 生成静态资源的存放路径
    assetsDir: 'assets',
    // 禁用资源内联为 base64
    assetsInlineLimit: 0,
    // 启用/禁用 CSS 代码拆分
    cssCodeSplit: true,
    // 构建后是否生成 source map 文件
    sourcemap: true,
    // 清空输出目录
    emptyOutDir: true
  }
});

创建入口文件 main.js ​

js
import './style.css'
import init from './game/index.js'

// 初始化 pixi 模块
init()
import './style.css'
import init from './game/index.js'

// 初始化 pixi 模块
init()

配置画布属性 game/config.js ​

js
const appConfig = {
    background: '#1099bb',
    width: 640, 
    height: 480
}

export default appConfig;
const appConfig = {
    background: '#1099bb',
    width: 640, 
    height: 480
}

export default appConfig;

创建 画布 game/index.js ​

js
import { Application } from 'pixi.js';
import appConfig from './config.js'

const init = async () => {
    // 创建一个Application实例
    const app = new Application();

    // 初始化Application实例，设置背景颜色和窗口大小
    await app.init(appConfig);

    // 将Application实例的canvas添加到文档的body中
    document.body.appendChild(app.canvas);
};

// 暴漏init函数
export default init;
import { Application } from 'pixi.js';
import appConfig from './config.js'

const init = async () => {
    // 创建一个Application实例
    const app = new Application();

    // 初始化Application实例，设置背景颜色和窗口大小
    await app.init(appConfig);

    // 将Application实例的canvas添加到文档的body中
    document.body.appendChild(app.canvas);
};

// 暴漏init函数
export default init;

img